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 ничего не делают, по какой-то причудливой причине.

Ответ 1

настройка overflow должна позаботиться об этом, но вам также нужно установить высоту Content. Если атрибут height не задан, div будет расти вертикально так высоко, как нужно, и полосы прокрутки не понадобятся.

См. пример: http://jsfiddle.net/ftkbL/1/

Ответ 2

Код из приведенного выше ответа от Dutchie432

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

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

Ответ 3

использовать свойство overflow

overflow: hidden; 

overflow: auto;

overflow: scroll;

это будет работать в иншаАллах :)

Ответ 4

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