css實現上面div根據內容自動高度，下面的div自動鋪滿剩餘高度
阿新 • • 發佈：2019-01-10
“載入更多”的功能，如果是監聽某個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; } } } } }
期待更合適的答案。。。