父元素包含两个 div，一个固定高度，另一个填满剩余高度

花铛

已于 2025-01-24 16:38:50 修改

阅读量4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS

于 2019-06-11 14:28:25 首次发布

本文链接：https://blog.youkuaiyun.com/wsln_123456/article/details/91434096

CSS 专栏收录该内容

19 篇文章

订阅专栏

本文深入探讨了三种网页布局方法：flex弹性布局，利用CSS calc()函数动态计算长度，以及通过JavaScript精确控制高度。每种方法都附有详细的代码示例，帮助读者理解如何实现自适应和响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="parentDiv">
    <div class="childDiv1"></div>
    <div class="childDiv2"></div>
</div>

flex 弹性布局：

.parentDiv{
        border:1px solid black;
        width:100%;
        height:800px;
        display:flex;
        flex-direction: column;
}
.childDiv1{
        background-color: blanchedalmond;
        width:100%;
        height: 200px;
 }
 .childDiv2{
        background-color: #0f8bcb;
        width:100%;
        flex:1;
}

定位：

.parentDiv{
        border:1px solid black;
        width:100%;
        height:800px;
        position:relative;
}
.childDiv1{
       background-color: blanchedalmond;
       width:100%;
       height: 200px;
}
.childDiv2{
       background-color: #0f8bcb;
       position:absolute;
       top:200px;
       left:0;
       right:0;
       bottom:0;
}

CSS3 calc() 函数：

calc() 函数用于动态计算长度值。运算符前后都需要保留一个空格；支持 “+” , " - " , " * " , " / " 运算。

.parentDiv{
        border:1px solid black;
        width:100%;
        height:800px;
}
.childDiv1{
       background-color: blanchedalmond;
       width:100%;
       height: 200px;
}
.childDiv2{
       background-color: #0f8bcb;
       calc(100% - 200px);
}

js：

.parentDiv{
       border:1px solid black;
       width:100%;
       height:800px;
}
.childDiv1{
       background-color: blanchedalmond;
       width:100%;
       height: 200px;
}
.childDiv2{
       background-color: #0f8bcb;
       width:100%;
}


var parentDivH=$(".parentDiv").height();
var childDiv1H=$(".childDiv1").height();
$(".childDiv2").css("height",parentDivH-childDiv1H);