CSS: как получить полосы прокрутки для div внутри контейнера фиксированной высоты - PullRequest
78 голосов
/ 10 января 2011

У меня есть следующая разметка:

<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 ]

135 голосов
/ 10 января 2011

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

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

1 голос
/ 18 июня 2018

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

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

.Content {
    height:224px;
    overflow:auto;
    background:#fff;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...