版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/rencaishigepi/article/details/86228895
“加载更多”的功能，如果是监听某个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;
}
}
}
}
}
期待更合适的答案。。。