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