flex实现：上下两个div，一个固定高度，另一个填满剩余高度

最新推荐文章于 2025-03-20 12:01:19 发布

a伊雪

最新推荐文章于 2025-03-20 12:01:19 发布

阅读量6.5k

点赞数 3

分类专栏： css/html

本文链接：https://blog.csdn.net/u010565037/article/details/108595274

版权

css/html 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用Flex布局来实现页面中上下两个div的布局，其中一个div保持固定高度，另一个div自动填充剩余的高度。同时也提到了CSS3的calc()函数作为另一种解决方案。

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

1.flex

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

.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;
        display:flex;
        flex-direction: column;
}
.childDiv1{
        background-color: blanchedalmond;
        width:100%;
        height: 200px;
        flex:0 0 auto;//不放大或者缩小，维持原始尺寸
 }
 .childDiv2{
        background-color: #0f8bcb;
        width:100%;
        flex:auto;//自动伸缩填满剩余空间
}

2.CSS3calc()函数：

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