Div на всю высоту экрана

Ширина и высота экрана на CSS

Растянуть блок на всю ширину и высоту окна браузера можно с помощью:

1. position: fixed; . Пример: онлайн линейка.
2. единиц vw и vh
3. начальной width и height тега html . По умолчанию height любого тега, в том числе html и body , равна его содержимому. Для того, чтобы элемент имел min-height: 100%; , должна быть указана height его родителя.

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as ‘0’ (for ‘min-height’) or ‘none’ (for ‘max-height’). [w3.org]

Блок шириной на весь экран монитора выровнять по центру окна браузера

У многих сайтов, в том числе у "Шпаргалки блоггера" содержание ограничено определённой шириной и горизонтально выравнивается по середине экрана.

Для того, чтобы контент выходил за пределы этих 1200px , но был ограничен шириной окна браузера, достаточно такого кода:

Картинка на весь экран CSS

Особенно здорово смотрятся изображения. Они занимают необходимое им пространство, но не более ширины окна браузера.

Код немного доработан, опираясь на статью "Размер изображения меняется при изменении экрана браузера". Там же написан соответствующий вариант для видео.

Вопрос по CSS . Задача: есть высокий блок-контейнер, он по высоте не помещается на один экран (например, div , в котором много параграфов), надо задать фон этому блоку-контейнеру, чтобы он был закрашен полностью.

Нашел вот такое решение: задать всем блокам-родителям height: 100%; , а блоку-контейнеру задать min-height: 100%; . Вот пример:

Не понимаю, почему это работает. Похоже на "шаманство". min-height задает минимальную высоту. Получается, что минимальная высота содержимого дива равна 100% высоты содержимого div . Посмотрел в devtools, выяснилось, что div может быть по высоте больше, чем body и html .

2 ответа 2

Почему это работает?

Потому что div просто переполняет (вылазит за границы) body и всё. Задавая overflow: hidden; для body мы увидим, что div просто обрезается (если высота экрана небольшая).

Как с этим быть?

Это задавание height: 100%; блокам всех уровней вложенности довольно неудобно. Задайте просто нужному вам блоку min-height: 100vh; , где vh — единицы высоты экрана. У body тогда будет по умолчанию height: auto; и body просто будет подстраиваться под содержимое.

Работу min-height: 100% можно понять на примере с установкой прилипающего футера. При этом есть стили:

При этом min-height: 100% работает ТАК:

Если СОДЕРЖИМОГО МАЛО у блока content , то его высота МИНИМАЛЬНО равна 100% высоты вьюпорта ( wrapper – это 100% от высоты body , body – это 100% от высоты html , а html – это 100% от высоты viewport ). При этом у блока content есть нижний paddind -буфер отрицательный, а у блока блока footer есть отрицательный margin , который позволяет в случае, когда много содержимого, "наползти" на этот padding -буфер.

Если же содержимое НЕ ВЛЕЗАЕТ на экран (содержимого МНОГО в блоке content ), то высота определяется содержимым – содержимое растягивает.

Еще раз повторю, чтобы все запомнили – если содержимого мало, высота блока равна высоте вьюпорта (это и есть МИНИМАЛЬНОЕ значение высоты, то есть, меньше быть не может, а больше – пожалуйста, если сможешь растянуть содержимым), если много – высота блока БОЛЬШЕ высоты вьюпорта и определяется содержимым, которое на эту высоту и растягивает.

К поиску ответа на вопрос «Как сделать DIV на весь экран, перекрывающий всю страницу, с помощью CSS» обычно обращаются в двух случаях. Во-первых, чтобы соблюсти требование закона и скрыть контент от пользователей не доросших для его просмотра. Во-вторых для того, чтобы оградить контент своего сайта от копирования. В данной статье рассмотрим то, как создать такой div , который перекрывает всю страницу и которым можно спрятать весь контент, а можно просто его уберечь от простого копирования. Но всё это конечно легко обходится, поэтому для себя я озадачился этим вопросом только для того, чтобы соблюсти закон на части своих страниц одного проекта (где про алкоголь и сигареты – иначе Google AdSense ругается).

Рабочий пример css-кода с блокирующим весь экран div (на всю ширину и всю высоту экрана)

Сразу приведу готовый код страницы с блокирующим весь экран div , который занимает всю ширину и всю высоту экрана (при условии, что у тега не переопределены высота и ширина, так как div наследует высоту и ширину от body , в котором он располагается):

Где разместить и как обозначить div , блокирующий всю ширину и высоту экрана

Сам div можно вставить в любое место в коде страницы только так, чтобы он был вложен только в . Это может потребоваться для того, чтобы запутать пользователя, желающего обойти этот div и всё-таки добраться до контента страницы, но это будет наверняка тщетно — все современные браузеры идут в комплекте с инструментами разработчика и всё это быстро находится и обходится. Поэтому проще вставить этот div перед закрывающим тегом