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%;

}