关于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;保证高度内容精确

---

 

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