Css 具有100%高度和溢出的div：自动

我正在尝试制作一个页面，其中有3个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>

我尝试制作一个简化的JSFIDLE示例：

单击该按钮将增加中间分区的内容。当页面已满时，我希望中间分区有滚动条，但它们不会显示。有人能帮我完成吗

我也不介意3个div实际上占据了页面底部的整个空间，即使它们没有太多内容。有没有办法让身高：100%贪婪？

---

我应该以不同的方式安排我的3个div吗？

这将非常接近您要寻找的内容听起来像：

实际上我只改变了一件事：

height:100%

到

height:100vh

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

vh

将其设置为视口高度的100%。这是一个新的CSS3单元。使用它只是取决于你需要什么样的兼容性。所有主要的现代浏览器都支持它。而且它似乎在几代人以前就得到了很好的支持

---

CSS-tricks.com有一个关于视口高度的选项。

这将非常接近您要查找的内容，听起来像：

实际上我只改变了一件事：

height:100%

到

height:100vh

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

vh

将其设置为视口高度的100%。这是一个新的CSS3单元。使用它只是取决于你需要什么样的兼容性。所有主要的现代浏览器都支持它。而且它似乎在几代人以前就得到了很好的支持

---

CSS-tricks.com有一个关于视口高度的选项。

在

#main

元素上设置

最大高度和
溢出：滚动

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

更新小提琴：

设置
最大高度和
溢出：在
#main
元素上滚动

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

更新小提琴：

您可以将
高度：100%
设置为
html
和
正文
，将
最小高度：100%
设置为
div#main
。这使您的示例具有图片技巧。
请看这里：

所以

及

您可以将
height:100%
设置为
html
和
body
，将
min height:100%
设置为
div\main
。这使您的示例具有图片技巧。
请看这里：

所以

及

您缺少：
overflow-y:在中心的div上滚动
，在右侧和左侧滚动
overflow:hidden
。我看不到其他地方提到过这一点，所以如果这些div也可能包含太多信息，那么您将需要设置该样式

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

您缺少：
overflow-y:在中心的div上滚动
，在右侧和左侧滚动
overflow:hidden

。我看不到其他地方提到过这一点，所以如果这些div也可能包含太多信息，那么您将需要设置该样式

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

---

假设我有一个固定大小的页眉/页脚，我可以做一些像100vh-80px的事情吗？不是CSS。目前，CSS本身无法完成这样的逻辑或操作。您必须通过javascript或jquery来完成。获取视口高度&页脚的高度（以防将来页脚发生变化），然后减去这两个值并不太糟糕。然后该值将被指定为CSS（通过javaScript应用）。更简单的选择是将

100vh

更改为

85vh

（或其他值）。这样，它总是给页脚留出一点空间。但取决于你的设计布局，它看起来可能不是最好的。谢谢，我选择只听窗口调整事件，然后通过js设置css高度。我只是希望有更好的方法来做。你可以在css中使用calc。高度：计算（100vh-80px）；假设我有一个固定大小的页眉/页脚，我可以做一些像100vh-80px的事情吗？不是CSS。目前，CSS本身无法完成这样的逻辑或操作。您必须通过javascript或jquery来完成。获取视口高度&页脚的高度（以防将来页脚发生变化），然后减去这两个值并不太糟糕。然后该值将被指定为CSS（通过javaScript应用）。更简单的选择是将

100vh

更改为

85vh

（或其他值）。这样，它总是给页脚留出一点空间。但取决于你的设计布局，它看起来可能不是最好的。谢谢，我选择只听窗口调整事件，然后通过js设置css高度。我只是希望有更好的方法来做。你可以在css中使用calc。高度：计算（100vh-80px）；