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

时间:2011-01-10 12:15:42

标签: css scrollbar overflow

我有以下标记:

<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无所作为。

5 个答案:

答案 0 :(得分:133)

设置overflow应该处理它,但您还需要设置Content的高度。如果未设置height属性,div将垂直增长到需要的高度,并且不需要滚动条。

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

答案 1 :(得分: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;
}

答案 2 :(得分:1)

来自Dutchie432的上述答案的代码

.FixedHeightContainer {
    float:right;
    height: 250px;
    width:250px; 
    padding:3px; 
    background:#f00;
}

.Content {
    height:224px;
    overflow:auto;
    background:#fff;
}

答案 3 :(得分:0)

HTML

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

CSS

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
  overflow-y: scroll;
}

/*SCROLLBAR MODIFICATIONS*/

.FixedHeightContainer::-webkit-scrollbar {
    width: 8px;
}

.FixedHeightContainer::-webkit-scrollbar-thumb {
    background: #909090;
    border-radius: 8px;
}
.FixedHeightContainer::-webkit-scrollbar-track {
    background: #FFFFFF;
}

答案 4 :(得分:-2)

使用overflow属性

overflow: hidden; 

overflow: auto;

overflow: scroll;

它将在inshaAllah中起作用:)