使用動態高度頁腳滾動動態高度div

我在父級（彈出菜單）中有兩個div，兩個div都需要動態高度。第二個div位於絕對底部。我需要頂部的div滾動，當它不適合父母的第二個div。第二個div應該始終獲得所需的高度。使用動態高度頁腳滾動動態高度div

我（簡體）HTML：

<div id="parent"> 
    <div id="top-div"> 
     <li>Link</li> 
     <li>Link</li> 
     <li>Link</li> 
     <li>Link... etc</li> 
    </div> 
    <div id="bottom-div"> 
     <p>Needs dynamic height since it sometimes contains</p> 
     <span>ERROR MESSAGES</span> 
    </div> 
</div>

https://jsfiddle.net/4032o8bj/

我搜索周圍的解決方案，但還沒有找到一個在那裏我可以不設置高度，無論是#top-div或#bottom-div脫身。 #parent是height: 100%; position: fixed;

來源

2016-09-03 Lehar001

如果你沒有支持老的瀏覽器，您可以利用柔性佈局：

添加到

#parent { 
    ....  
    display: flex; 
    justify-content: space-between; 
    flex-direction: column; 
} 
#top-div { 
    ... 
    overflow-y:scroll; 
}

卸下底部div的絕對定位：

#bottom-div { 
    background-color: blue; 
}

小提琴：https://jsfiddle.net/41udrh4y/

來源

2016-09-03 18:30:10

通過使用相關的-webkit/moz-框樣式，您可以使Flex獲得舊版瀏覽器的支持。可能無法像新的瀏覽器一樣工作，但它是可能的。 https://css-tricks.com/using-flexbox/除IE低於版本10 – Ricky

謝謝！我不熟悉flex的佈局，但這種做法有訣竅。當＃top-div變得太長時，它會將＃bottom-div稍微推出父代。我已經通過向＃bottom-div添加了最小高度對此進行了排序。如果＃top-div和＃bottom-div都更高，仍然會導致一些問題。 – Lehar001

使用動態高度頁腳滾動動態高度div

回答

相關問題