上容器div高度不确定，下容器div自动填满剩余空间

最新推荐文章于 2024-05-13 17:42:13 发布

Nani233

最新推荐文章于 2024-05-13 17:42:13 发布

阅读量550

点赞数

本文链接：https://blog.csdn.net/Nani233/article/details/118524240

版权

Flex布局自适应网页设计 CSS样式前端开发

关键词由CSDN通过智能技术生成

这种需求还是挺常见的，如下图

1.标题123算是固定高度

2.选择框（搜索框）后台返回，可能是一行、两行、三行，所以高度不确定

3.最后一块是表格信息

需求：实现自适应，让表格自动填满剩余的高度。

实现代码如下：

<div class="container">
    <div class="title"></div>
    <div class="search"></div>
    <div class="list"></div>
</div>


<style>
    .container{
        display: flex;
        flex-direction: column;
    }
    
    .title{
        flex-basis: 40px;
    }

    .search{
        // 这个什么都不用设置，后台返回数据遍历出来自动会填充占位
    }
    
    .list{
        flex: 1;
    }

</style>