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

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

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%, но, к сожалению, это свойство кажется проигнорированным, а полоса прокрутки просто не отображается.

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

Итак, мой вопрос: может ли это быть сделано с помощью только html, или, если это произойдет, - javascript?

Ответ 1

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

С учетом этого HTML:

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

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

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

Live Demo

Ответ 2

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

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

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

Ответ 3

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