页面高度为百分百情况下，内容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%;
}
}同样达到效果
