css高度设置占满页面,《CSS》关于高度铺满的问题

场景一：

我想让这个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; }

在场景一的基础上(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; /* 吸收剩余空间 */

}

场景三：

Lorem ipsum dolor sit

box1 高度不知道(由内容决定)，要求 box2 撑满剩余空间。

依然可以使用场景二的方法二(弹性盒)解决