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
ничего не делают, по какой-то странной причине.
2 ответов
задание overflow
следует позаботиться об этом, но вам нужно установить высоту Content
тоже. Если атрибут height не установлен, div будет расти вертикально так высоко, как ему нужно, и полосы прокрутки не понадобятся.
См. Пример: http://jsfiddle.net/ftkbL/1/
код из приведенного выше ответа Dutchie432
.FixedHeightContainer
{
float:right;
height: 250px;
width:250px;
padding:3px;
background:#f00;
}
.Content
{
height:224px;
overflow:auto;
background:#fff;
}