关于css:CSS-DIV高度撑满剩余空间

56次阅读

共计 831 个字符，预计需要花费 3 分钟才能阅读完成。

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