高度为100％且溢出的div：auto

Question

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

这是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示例：enter link description here

单击该按钮将增加中心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有一个关于视口高度的good article。

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

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

更新了小提琴：

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

Answer 4

您在missDiv上失踪：overflow-y:scroll，右侧和左侧是overflow:hidden。我没有看到其他地方提到过的内容，所以如果这些div也有太多信息，那么你想要设置那种风格。

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