Intereting Posts
как задать ограничение на drag and drop элементов svg в Parent Div. Это означает, что для Ex. при перетаскивании элементов эллипса и прямоугольника не выходили за пределы поля Метод делегата jQuery не работает для keydown и keypress Элемент Button, созданный с помощью CSS, не показывает фоновое изображение в IE6 ReferenceError: событие не определено error в Firefox Ширина самого широкого элемента устанавливает ширину всех братьев и сестер в строке Опубликовать значения из формы HTML и получить к ним доступ в виде флага вызов функции javascript из андроидной активности Почему на главном контейнере есть вертикальная прокрутка? PHP-метод синтаксического анализа HTML-строки Угловой 2 Материал Настроить md-меню Как выбрать элементы, которые отображаются в результате Grid Почему я не могу удалить синюю границу textarea в Twitter Bootstrap? Понимание ошибок HTML-валидатора с элементами самозакрывающегося синтаксиса и «не-void» белые точки под текстом HTML Одиночные кавычки в объекте JavaScript-объекта

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

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

Div должен динамически изменять размер, чтобы соответствовать экрану. Но если контент не подходит на экране, он должен отображать полосу прокрутки. Поэтому браузеру прокрутки никогда не нужно будет становиться активным.

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

 

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

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

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

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

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

 

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

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

Демо-версия

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

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

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

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

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

 #container{ background: #eaeaea; max-height: 100vh; overflow-y: scroll; } .parent div{ outline: 1px solid orange; width: 200px; height: 200px; float:left; }