web-dev-qa-db-ja.com

CSS：固定高さのコンテナー内のdivのスクロールバーを取得する方法

次のマークアップがあります。

<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:autoとoverflow:scrollは、何らかの奇妙な理由で何もしていません。

cssscrollbaroverflow
79
David

overflowを設定することで対応できますが、Contentの高さも設定する必要があります。 height属性が設定されていない場合、divは必要な高さまで垂直方向に拡大し、スクロールバーは必要ありません。

例を参照してください： http://jsfiddle.net/ftkbL/1/

135
Dutchie432

Dutchie432による上記の回答のコード

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

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

overflowプロパティを使用

overflow: hidden; 

overflow: auto;

overflow: scroll;

inshaAllahで動作します:)

0
bisma