flex布局时，内容区域自适应高度

Posted 2021-02-13 momozjm

页面元素高度固定，中间的元素需要撑满屏幕，或者内容多时显示滚动条时，我们要把父元素设置为height:100vh

<div class="parent">
  <div class="header">

  </div>
  <div class="content">

  </div>
  <div class="footer">
    
  </div>
</div>

　　

.parent{
  display: flex;
  height: 100vh;
}
.header{
  height: 100px;
}
.content{
  flex: 1;
}
.footer{
  height: 100px;
}