css 剩余空间,CSS DIV高度撑满剩余空间

页面高度为百分百情况下，内容div实现自动撑满剩下的位置头部区域高度为110rpx，内容区域div实现自动撑满剩下的位置。

如果将div 高度设置为100%，会造成多出头部的110rpx,会有滚动条显示！.content{

width: 100%;

height: 100%;

box-sizing: border-box;

position: relative;

.search_box{

position: relative;

box-sizing: border-box;

width: 100%;

height: 110rpx;

border: 1px solid red;

}

.list{

width: 100%;

height: 100%;

box-sizing: border-box;

border: 1px solid green;

}

}

此时我们不需要滚动条方法一、绝对定位,将list css修改为。.list{

width: 100%;

box-sizing: border-box;

border: 1px solid green;

position: absolute;

top: 110rpx;//头部高度

left: 0;

bottom: 0;

}

此时已经实现无滚动条效果

方法二、利用 padding-top 和 margin-top ，将 margin-top 设置为负值。.content{

width: 100%;

height: 100%;

padding-top: 110rpx;

box-sizing: border-box;

position: relative;

.search_box{

position: relative;

box-sizing: border-box;

margin-top: -110rpx;

width: 100%;

height: 110rpx;

border: 1px solid red;

}

.list{

width: 100%;

box-sizing: border-box;

border: 1px solid green;

height: 100%;

}

}同样达到效果