Прокрутка div без фиксированной высоты - PullRequest
Новая
       9

Прокрутка div без фиксированной высоты

18 голосов
/ 06 апреля 2011

Мне нужно создать динамически изменяемый размер прокрутки.

Размер div должен динамически изменяться в соответствии с размером экрана.Но если содержимое не помещается на экране, оно должно отображать полосу прокрутки.Таким образом, собственная полоса прокрутки браузера не должна становиться активной.

Я могу получить полосу прокрутки для отображения в div, поместив в нее еще один div и используя overflow: auto. 

<div id="gridcontainer" style="overflow:auto;height:300px; width:100px;" >
    <div id="gridcontent" style="height:100%">
    <!--Put loads of text in here-->
    </div>
</div>

.Проблема в том, что это работает только тогда, когда первый div имеет фиксированную высоту.Я надеялся, что смогу просто установить первый div в height:100%, но, к сожалению, нет - это свойство, похоже, игнорируется, а полоса прокрутки просто не появляется.

Я попытался поместить div в таблицус height:100% и установкой первого div на height:auto, надеясь, что он может получить высоту от своего родителя.Но div все еще, кажется, игнорирует свойство высоты.

Так что мой вопрос: это можно сделать, используя только HTML, или, в противном случае, JavaScript?

Ответы [ 3 ]

27 голосов
/ 06 апреля 2011

Вы можете растянуть div, используя абсолютное позиционирование .Таким образом, он всегда будет принимать размер окна браузера (или ближайшего расположенного предка).

Учитывая этот HTML: 

<div id="gridcontainer"></div>

CSS должен выглядеть примерно так: 

#gridcontainer {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  overflow: auto;
}

Демонстрационная версия

1 голос
/ 29 сентября 2017

Начиная с IE9, вы можете использовать единицы просмотра.

Предположим, что высота вашего контейнера является динамической, если только ее размер не больше высоты окна.В этом случае мы прекращаем расширение и активируем свиток. 

#container{
  background: #eaeaea;
  max-height: 100vh;
  overflow-y: scroll;
}

.parent div{
  outline: 1px solid orange;
  width: 200px;
  height: 200px;
  float:left;
}
<div id='container'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
0 голосов
/ 29 сентября 2017

Если вы пытаетесь подогнать элемент по размеру экрана, вы можете установить значение высоты и ширины элемента на 100%.

Вам также понадобится установить высоту html и body 

html, body {height: 100%}
#gridcontaine {
   height: 100%;
   width: 100%;
 }
...