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;
    }
}

image.png

此时我们不需要滚动条
  • 方法一、绝对定位,将list css修改为。
    .list{
        width: 100%;
        box-sizing: border-box;
        border: 1px solid green;
        position: absolute;
        top: 110rpx;//头部高度
        left: 0;
        bottom: 0;
    }

image.png

  • 此时已经实现无滚动条效果
  • 方法二、利用 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%;
    }
}
  • 同样达到效果

image.png

阅读 3.6k
34 声望
0 粉丝
0 条评论
34 声望
0 粉丝
文章目录
宣传栏