css實現div的高度填滿剩余空間

css實現div的高度填滿剩余空間

方式1:絕對定位

.top{
width: 100%;
height: 70px;
}

.bottom{
background-color: #cc85d9;
width: 100%;
position: absolute;
top: 70px;
bottom: 0px;
left: 0px;
}

 方式2：border-sizing

html,
body {
height: 100%;
padding: 0;
margin: 0;
}

.container {
height: 100%;
padding: 70px 0 0;
box-sizing: border-box;
}

.bottom {
height: 100%;
background: #fd9740;
}

.top {
height: 70px;
margin: -70px 0 0;
background: #61e1f6;

width: 100%;
}

或者

.top {
height: 70px;

position: absolute;

top: 0;
left: 0;

background: #61e1f6;

width: 100%;
}