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


92

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

<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、いくつかの奇妙な理由で、何もしないされています。

回答:


154

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

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


わかりました。ありがとう。それで、div.Contentの高さを指定する必要がありますか?私はそれがコンテナに収まらないとうまくいき、それに基づいてスクロールバーを適用すると仮定しました。
David

6
Content固定の高さを指定する場合FixedHeightContainer、タイトルの高さがわからないため、固定の高さを指定しないでくださいContent。押し出される可能性があります。参照:jsfiddle.net/ftkbL/2固定の高さで要素にのみ設定する必要がありoverflow: scrollます。jsfiddle.net/ftkbL/3またはjsfiddle.net/ftkbL/4を
RoToRa

(最初のリンクから)ポイントはわかりましたが、タイトルテキストは既知であり、ユーザーがテキストを非実用的なサイズに膨らませない限り、行を分割するには短すぎます。
David

高さを短くすると同時にスクロールバーを非表示にする方法はありますか?このようにして、ユーザーがモバイルデバイスで下にドラッグすると、下にスクロールしていることがわかりますが、ブラウザーに2つのスクロールバーを表示する煩わしさはありませんか?
クレウィス2014年

@blackhawk-私が知っていることではない。これにはJavaScriptを使用する必要がある場合があります。具体的には、jQuery Draggableライブラリを考えています。jqueryui.com / draggable-考慮すべき1つのことは、デスクトップユーザーがスクロールする方法をどのように知るかです。
Dutchie432

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

1

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

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

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

-2

overflowプロパティを使用

overflow: hidden; 

overflow: auto;

overflow: scroll;
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.