CSS:如何在固定高度的容器内获取div的滚动条

Question

我有以下标记:

<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    ..blah blah blah...
  </div>
</div>

CSS看起来像这样:

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
}
.Content
{
  ???
}

由于其含量,高度div.Content通常大于由其提供的空间div.FixedHeightContainer.此刻,div.Content快乐地延伸到底部div.FixedHeightContainer- 根本不是我想要的.

如何指定div.Content得到滚动条(只有最好垂直,但我不挑食)时,其高度过大,以适应？

overflow:autooverflow:scroll出于某种奇怪的原因,它什么都不做.

Answer 1

设置overflow应该照顾它,但你也需要设置高度Content.如果未设置height属性,div将垂直增长到需要的高度,并且不需要滚动条.

参见示例:http: //jsfiddle.net/ftkbL/1/

Answer 2

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;
}