CSS：如何在固定高度的容器内获取div的滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4646708/
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
CSS: how to get scrollbars for div inside container of fixed height
提问by David
I have the following markup:
我有以下标记：
<div class="FixedHeightContainer">
<h2>Title</h2>
<div class="Content">
..blah blah blah...
</div>
</div>
The CSS looks like this:
CSS 看起来像这样：
.FixedHeightContainer
{
float:right;
height: 250px;
width:250px;
}
.Content
{
???
}
Due to its content, the height of div.Contentis typically greater than the space provided by div.FixedHeightContainer. At the moment, div.Contentmerrily extends out of the bottom of div.FixedHeightContainer- not at all what I want.
由于其内容， 的高度div.Content通常大于 提供的空间div.FixedHeightContainer。此刻，div.Content欢快地从底部延伸出来div.FixedHeightContainer——完全不是我想要的。
How do I specify that div.Contentgets scrollbars (preferably vertical only, but I'm not fussy) when its height is too great to fit?
div.Content当它的高度太大而不适合时，我如何指定获取滚动条（最好是垂直的，但我不挑剔）？
overflow:autoand overflow:scrollare doing nothing, for some bizarre reason.
overflow:auto并且overflow:scroll什么都不做，出于某种奇怪的原因。
回答by Dutchie432
setting the overflowshould take care of it, but you need to set the height of Contentalso. If the height attribute is not set, the div will grow vertically as tall as it needs to, and scrollbars wont be needed.
设置overflow应该照顾它，但您还需要设置高度Content。如果未设置 height 属性，则 div 将根据需要垂直增长，并且不需要滚动条。
See Example: http://jsfiddle.net/ftkbL/1/
参见示例：http: //jsfiddle.net/ftkbL/1/
回答by John Love
FWIW, here is my approach = a simple one that works for me:
FWIW，这是我的方法 = 一个对我有用的简单方法：
<div id="outerDivWrapper">
<div id="outerDiv">
<div id="scrollableContent">
blah blah blah
</div>
</div>
</div>
html, body {
height: 100%;
margin: 0em;
}
#outerDivWrapper, #outerDiv {
height: 100%;
margin: 0em;
}
#scrollableContent {
height: 100%;
margin: 0em;
overflow-y: auto;
}
回答by Charitha Goonewardena
Code from the above answer by Dutchie432
来自Dutchie432的上述答案的代码
.FixedHeightContainer {
float:right;
height: 250px;
width:250px;
padding:3px;
background:#f00;
}
.Content {
height:224px;
overflow:auto;
background:#fff;
}
回答by bisma
use overflowproperty
使用overflow财产
overflow: hidden;
overflow: auto;
overflow: scroll;
