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

Posted 2021-02-13 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布局时，内容区域自适应高度的主要内容，如果未能解决你的问题，请参考以下文章