一个div分上下两部分，上部分高度不固定，下面部分自动填满剩余高度

2024年2月7日 146次阅读 来源: 听风语

div自动填满剩余高度

html

<div class="wrapper" style="height:800px;">
    <div class="header" id="header"></div>
    <div class="body" id="body"></div>
</div>

正常情况自上而下放要放的东西就行了，
但是现在有一个需求是这样的，头部国定，下面的东西会很多要有滚动条
我之前都是头部固定，给wrapper一个overflow-y:hidden就行了
但是现在又有一个恶心的需求，整个wrapper背景一样，而header会有一些文字，而且没有背景，这样滚动的话会从文字缝隙之间看到滚动的内容，不雅
总之就要header是一个高度不确定的div，而body自动铺满剩下的高度

现在有两种方法，对于获取动态高度我倾向于用js
方法一：

var header = document.getElementById('header');
var body = document.getElementById('body');
body.style.height = 800-header.clientHeight+'px';

第二种方法就是只用css来搞定，对于灵活的布局首先就会想到flex

方法二：

.wrapper{
    display:flex;
    flex-direction: column;  //竖轴方向
}
.body{
    flex:auto;      //自动铺满剩余空间
}

flex学习链接

    原文作者：听风语
    原文地址: https://segmentfault.com/a/1190000018060514
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞