高度為100％且溢出的div：自動

Question

我正在嘗試制作一個頁面，其中我彼此相鄰有3個div。 左div和右div的內容均受限制，在許多情況下，中心div的內容將超出頁面上的顯示范圍。 我的目標是在需要時為中央div提供垂直滾動條。 如果左div或右div實際上有太多內容，則整個頁面應該是可滾動的。

這就是我想要的樣子：

<div id="everything">
    <div id="centeredDiv">
        <div id="left">text</div>
        <div id="main">plenty of content</div>
        <div id="right">text</div>
    </div>
</div>

這是CSS：

div {
    padding: 0px;
    margin: 0px;
    border: 0px;
    height: 100%;
}

div#everything {
  width: 100%;
  text-align: center;
  left: 0px;
  top: 0px;
}

div#centeredDiv {
  width: 200px;
  display: inline-block;
  position: relative;
}

div#left, div#right {
    width:100px;
    background-color: yellow;
    position: absolute;
    top: 0px;
}

div#left {
    left:-100px;
}

div#right {
    left:200px;
}

div#main {
    width:200px;
    background-color: orange;
    overflow-y : auto;
}

我試圖做一個簡化的jsfiddle示例： 在此處輸入鏈接描述

單擊該按鈕將增加中心div中的內容。 頁面滿了時，我想使用中心div的滾動條，但沒有顯示。 誰能幫我做到這一點？

我也不介意3個div實際占據了整個頁面底部的空間，即使它們沒有太多內容。 有沒有辦法使身高：100％貪婪？ 我應該以不同的方式分配3個div嗎？

Answer 1

這將非常接近您要查找的內容，聽起來像是： jsFiddle 。

我實際上只改變了一件事情： height: 100% 達到height:100vh 。

div {
    padding: 0px;
    margin: 0px;
    border: 0px;
    height: 100vh;
}

vh將其設置為視口高度的100％。 這是一個新的CSS3單元。 使用它僅取決於您需要哪種兼容性。 所有主要的現代瀏覽器都支持它。 它似乎在幾代人后都提供了很好的支持： caniuse.com 。

CSS-tricks.com上有一篇關於視口高度的好文章 。

Answer 2

您可以設置height:100%的html和body和min-height:100%的div#main 。 這就是您的示例圖片技巧。 在這里查看： http : //jsfiddle.net/Zu7MS/1/

所以，

html, body {
    height: 100%;
}

和

div#main {
    width:200px;
    background-color: orange;
    overflow-y : auto;
    min-height: 100%;
}

Answer 3

設置max-height並overflow: scroll在#main元素上overflow: scroll

div#main {
    width:200px;
    background-color: orange;
    max-height: 300px;
    overflow-y: scroll;
}

更新的小提琴：

http://jsfiddle.net/km8Xk/5/

Answer 4

您丟失了：在centeredDiv上overflow-y:scroll ，在左右兩側都overflow:hidden了overflow:hidden overflow-y:scroll 。 我在其他地方看不到提到的內容，因此，如果這些div也可能包含太多信息，則需要設置該樣式。

div#left, div#right {
  width:100px;
  background-color: yellow;
  position: absolute;
  top: 0px;
  overflow:hidden;
}