CSS 溢出（滚动）- 100% 容器高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4910883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overflow (scroll) - 100% container height
提问by momo
i'm trying to have a floated div (call it 'sidebar') display 100% of container height, and scroll if necessary.
我正在尝试让浮动 div（称为“侧边栏”）显示 100% 的容器高度，并在必要时滚动。
if the sidebar has more content (height) than the container would have otherwise, it should scroll.
如果侧边栏的内容（高度）多于容器的其他内容，则它应该滚动。
content is dynamic and fixed heights aren't possible.
内容是动态的，固定高度是不可能的。
i'd like to avoid tables if possible, but would use them if that was the only solution.
如果可能，我想避免使用表格，但如果这是唯一的解决方案，我会使用它们。
i don't want to use javascript.
我不想使用 javascript。
this effect can be achieved with tables, if the table, body, and cells are all given 100% height, and in one cell a div with height:100% and overflow:scroll is set. this works in webkit (Safari and Chrome) as well as IE, but fails in gecko (Fx) - 'fails' means that the div with more content than the container will expand the container (again only in Fx). the same idea works in webkit if using divs with display:table/table-row/table-cell, but fails in both Fx and IE. i can provide a sample of this if it'd be helpful.
这种效果可以通过表格来实现，如果表格、正文和单元格都被赋予 100% 的高度，并且在一个单元格中设置了一个高度为 100% 和溢出：滚动的 div。这适用于 webkit（Safari 和 Chrome）以及 IE，但在 gecko (Fx) 中失败 - 'fails' 意味着内容比容器多的 div 将扩展容器（再次仅在 Fx 中）。如果使用带有 display:table/table-row/table-cell 的 div，同样的想法在 webkit 中也有效，但在 Fx 和 IE 中都失败了。如果有帮助，我可以提供一个样本。
this effect could also be achieved using an iframe with height:100%, which seems to work in all modern browsers, but i'd like to avoid unnecessary iframes if possible as well.
这种效果也可以使用高度为 100% 的 iframe 来实现，这似乎适用于所有现代浏览器，但我也想尽可能避免不必要的 iframe。
i have to think that since it's possible using the above 'hacks' it might be possible using table-less, frame-less css, but is beyond my level of understanding.
我不得不认为，由于可以使用上述“技巧”，因此可以使用无表、无框架的 css，但这超出了我的理解水平。
any suggestions? tyia.
有什么建议？蒂亚。
回答by ?ime Vidas
Here's CSS styling to accomplish this:
这是实现此目的的 CSS 样式：
#container {
width: 500px;
border: 3px solid red;
margin: 0 auto;
position: relative;
}
#sidebar {
position: absolute;
left: 0;
top: 0;
width: 150px;
height: 100%;
background-color: yellow;
overflow-y: scroll;
}
#main {
margin-left: 150px;
}
p, ul {
padding: 10px;
}<div id="container">
<div id="sidebar">
<ul>
<li> line 1 </li>
<li> line 2 </li>
<li> line 3 </li>
<li> line 4 </li>
<li> line 5 </li>
<li> line 6 </li>
<li> line 7 </li>
<li> line 8 </li>
<li> line 9 </li>
<li> line 10 </li>
<li> line 11 </li>
<li> line 12 </li>
<li> line 13 </li>
<li> line 14 </li>
<li> line 15 </li>
<li> line 16 </li>
<li> line 17 </li>
<li> line 18 </li>
<li> line 19 </li>
<li> line 20 </li>
</ul>
</div>
<div id="main">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
</div>
</div>Live demo:http://jsfiddle.net/TUwej/2/
现场演示：http ://jsfiddle.net/TUwej/2/
