码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-03-15 17:27:43      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:区域   highlight   ade   设置   htm   parent   content   splay   显示   

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

标签:区域   highlight   ade   设置   htm   parent   content   splay   显示   

原文地址:https://www.cnblogs.com/momozjm/p/10538223.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!