CSS: как получить полосы прокрутки для div внутри контейнера фиксированной высоты

94

У меня такая разметка:

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

css scrollbar overflow Дэвид
источник

Ответы:

157

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

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

Голландцы432
источник
Хорошо спасибо. Итак, мне нужно указать высоту для div.Content? Я предположил, что из контейнера получится, что он не поместится, и применил полосы прокрутки на этом основании.
Дэвид
6
Если вы укажете Contentфиксированную высоту, вы не должны FixedHeightContainerуказывать фиксированную высоту, потому что вы не можете знать, какой высоты будет ваш заголовок, поэтому его Contentмогут вытолкнуть. См .: jsfiddle.net/ftkbL/2. Вы должны установить фиксированную высоту только для элемента с overflow: scroll. См. Jsfiddle.net/ftkbL/3 или jsfiddle.net/ftkbL/4
RoToRa
Я понимаю вашу точку зрения (из первой ссылки), но текст заголовка известен и слишком короткий, чтобы разорвать строку, если пользователь не увеличил текст до непрактичного размера.
Дэвид
Есть ли способ иметь небольшую высоту и одновременно скрывать полосу прокрутки? таким образом, когда пользователи перетаскивают вниз на мобильных устройствах, они будут видеть, что они прокручивают вниз, но без утомительного видения 2 полос прокрутки в своем браузере?
klewis
@blackhawk - Не знаю. Возможно, вам потребуется использовать для этого Javascript. В частности, я имею в виду библиотеку jQuery Draggable: jqueryui.com/draggable -одно подумать ... как пользователи настольных компьютеров узнают о прокрутке?
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;
бисма
источник