css实现上面div根据内容自动高度，下面的div自动铺满剩余高度

Whitess007

已于 2022-04-08 08:59:00 修改

阅读量1.5w

点赞数 1

分类专栏： Css 文章标签： css flex 布局

于 2019-01-10 13:50:26 首次发布

本文链接：https://blog.csdn.net/rencaishigepi/article/details/86228895

版权

Css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

“加载更多”的功能，如果是监听某个dom元素来实现，你会怎么做？

我的设想是：
1、此dom元素要可滚动；
2、判断合适应该做“加载更多”的逻辑；

在我所做的项目中，引用了bootstrap框架，并且这个dom元素隐藏的还比较深。

<body class='enroll-repos'>
    <nav class='navbar site-navbar-default'></nav>
    <div class='app container'>
        <div ng-if="tasks.length" ng-cloak></div>
        <div class='row'>
            <div id='advCriteria'> </div>
            <div class='main col-xs-12' ng-class="{'col-md-9':dirSchemas.length,'col-md-12':dirSchemas.length===0}">
                <div id='filterCriteria'></div>
                <div id='filterQuick' ng-cloak></div>
                <div id='filterTip' class="hidden-xs" ng-if="filter.isFilter||filter.tags.length"></div>
                <div id='repos'>
                    <div class='records'>
                    	这个元素的height才是可能会有10000px;        
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

而我要监听的就是那个 #repos 的DOM元素

每一个父级都设置为height:100%，会造成body也出现滚动条（隐藏滚动条只是一个美观问题，不解决实际问题）。因为body是100%，nav是50px，那底下的div.app.container还是100%的，就会造成body出现滚动条。而我想要div.app.container是100%-50px。

那该如何用css实现上面div根据内容自动高度，下面的div自动铺满剩余高度？

试过了很多种方法，最后只能 flex+许多层 嵌套解决了；

body.enroll-repos {
    display: flex;
    flex-direction: column;

    .app {
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        .row {
            flex-grow: 1;
            display: flex;

            .main {
                flex-grow: 1;
                display: flex;
                flex-direction: column;

                #repos {
                    flex-grow: 1;
                    display: flex;
                    flex-direction: column;
                    overflow-y: scroll;
                }
            }
        }
    }
}

期待更合适的答案。。。

Whitess007

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
6
评论
css实现上面div根据内容自动高度，下面的div自动铺满剩余高度

“加载更多”的功能，如果是监听某个dom元素来实现，你会怎么做？我的设想是：1、此dom元素要可滚动；2、判断合适应该做“加载更多”的逻辑；在我所做的项目中，引用了bootstrap框架，并且这个dom元素隐藏的还比较深。<body class='enroll-repos'> <nav class='navbar site-navbar-default'></nav> <div class='app container'>
复制链接

扫一扫