CSS DIV高度撑满剩余空间

页面高度为百分百情况下，内容div实现自动撑满剩下的位置

1. 头部区域高度为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%;
    }
}

• 同样达到效果