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