关于html5开发app的布局问题

关于html5开发app的布局问题

• 本内内容：
  
  • 　　关于vw布局下，主布局scroll占位问题
  • 　　描述关于header不确定时，如何之使用css进行主布局占位

• html部分
　　

• • <div class="main">
    　　<div class="head"></div>
    　　<div class="md">
    　　　　<div class="content">
    　　　　　　<div class="panel"></div>
    　　　　</div>
    　 　</div>
    </div>

• css部分

• * {
  padding: 0;
  margin: 0;
  }
  .main{
  height: 100vh;
  display: flex;
  flex-direction: column;
  }
  .head{
  height: 20vw;
  background: grey;
  flex-shrink: 0; //禁止压缩
  }
  .md {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  }
  .content{
  overflow-y: auto;
  }
  .panel{
  height: 2000px;
  }

• 实现原理
  
  • 　　使用flex布局进行垂直布局并规定最外层高度
  • 　　overflow: hidden;+overflow-y: auto;实现父级和子集滚动配合
  • 　　flex-shrink: 0;保证高度内容精确

• 感谢您的阅读，如果有误，或者其他问题，请回复

关于html5开发app的布局问题

原文：https://www.cnblogs.com/clors/p/13553831.html