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

Posted momozjm

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flex布局时,内容区域自适应高度相关的知识,希望对你有一定的参考价值。

页面元素高度固定,中间的元素需要撑满屏幕,或者内容多时显示滚动条时,我们要把父元素设置为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;
}

  

以上是关于flex布局时,内容区域自适应高度的主要内容,如果未能解决你的问题,请参考以下文章