场景一：
<body>
<div class="wrap"></div>
</body>
我想让这个div铺满整个页面。
方法一：
先让根元素和body铺满，再然div铺满，这样div就会继承body的高度了。
:root,
body {
height: 100%;
}
.wrap {
width: 100%;
height: 100%;
background-color: skyblue;
}
方法二：
让div脱离文档流，再铺满
.wrap {
width: 100%;
height: 100%;
background-color: skyblue;
position: fixed;
}
方法三：
让div脱离文档流，再吸收剩余空间
.wrap {
background-color: skyblue;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
场景二：
.box1 { width: 100%; height: 60px; background: red; }
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
</div>
在场景一的基础上（wrap满屏），box1 已知高度，我想让 box2 撑满剩余空间
方法一：
让 box2 脱离文档流，top隔开60px，再吸收剩余空间
.box2 {
position: absolute;
left: 0;
top: 60px;
right: 0;
bottom: 0;
background-color: plum;
}
方法二：
利用 calc 计算
.box2 {
position: absolute;
left: 0;
top: 60px;
width: 100%;
height: calc(100% - 60px);
background-color: plum;
}
方法三：
利用弹性盒
.wrap {
background-color: skyblue;
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column; /* 纵向排列 */
}
.box1 {
width: 100%;
height: 60px;
background-color: red;
flex: 0 0 1; /*不伸不缩，基本值占1份(60px) */
}
.box2 {
background-color: plum;
flex: 1; /* 吸收剩余空间 */
}
场景三：
<div class="wrap">
<div class="box1">
Lorem ipsum dolor sit
<div class="content"></div>
</div>
<div class="box2"></div>
</div>
box1 高度不知道（由内容决定），要求 box2 撑满剩余空间。
网友评论