沒有固定高度的滾動div

Question

我需要構建一個動態調整大小的滾動 div。

div 應動態調整大小以適合屏幕。 但是如果內容不適合屏幕，它應該顯示一個滾動條。 所以瀏覽器自己的滾動條永遠不需要激活。

我可以通過在其中放置另一個 div 並使用overflow: auto讓滾動條出現在 div 中。

<div id="gridcontainer" style="overflow:auto;height:300px; width:100px;" >
    <div id="gridcontent" style="height:100%">
    <!--Put loads of text in here-->
    </div>
</div>

問題是這僅在第一個 div 具有固定高度時有效。 我曾希望我可以將第一個 div 設置為height:100% ，但遺憾的是沒有——這個屬性似乎被忽略了，滾動條也沒有出現。

我試過將 div 放在一個height:100%的表中，並將第一個 div 設置為height:auto ，希望它可以從它的父元素中獲取它的高度。 但是 div 似乎仍然忽略了 height 屬性。

所以我的問題是：這可以只使用 html 來完成，還是 - 失敗 - javascript？

Answer 1

您可以使用絕對定位拉伸 div 。 這樣它將始終采用瀏覽器窗口的大小（或最近定位的祖先）。

鑒於此 HTML：

<div id="gridcontainer"></div>

CSS 應該是這樣的：

#gridcontainer {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  overflow: auto;
}

現場演示

Answer 2

從 IE9 開始，您可以使用視口單位。

假設容器的高度是動態的，除非它的大小大於窗口高度。 在那種情況下，我們停止展開並激活卷軸。

 #container{ background: #eaeaea; max-height: 100vh; overflow-y: scroll; } div{ outline: 1px solid orange; width: 200px; height: 200px; }

 <div id='container'> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

Answer 3

如果你想讓元素適合屏幕，那么你可以將元素的高度和寬度的值設置為 100%。

您還需要設置 html 和 body 的高度

html, body {height: 100%}
#gridcontaine {
   height: 100%;
   width: 100%;
 }