Название

Как сделать div с height 100% с помощью CSS.

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

Сначала решение этой задачи может показаться довольно простой, казалось бы, что нужно задать для блока свойство height со значением 100%.

<html>
<body>
<div style="height: 100%; background:#c9c;">
<p>Блок, который должен растянуться на 100% высоты окна браузера</p>
</div>
</body>
</html>

Но, как видите это свойство не работает. Блок не хочет растягиваться на всю ширину окна браузера.

Как решить эту проблему? Почему не работает свойство height:100%?

Все дело в том, что 100% должны браться от высоты родительского элемента. А какая у нас высота родительского элемента? Для элемента div, в данном примере, этими родительскими элементами являются элементы body и html.

По умолчанию, свойство height этих элементов принимает значение auto, а значит эти элементы имеют такую высоту,чтобы вместить в себе всю содержимое и не больше.

Чтобы изменить ситуацию, родительским элементам body и html также нужно добавить свойство height 100%.

Давайте посмотрим, что из этого получиться.

html, body {height:100%;}

Ну, вот, совсем другое дело. Теперь наш блок растянут на 100% высоты. Используйте это на практике.

 

Этот материал входит в соостав курса "Базовые приемы верстки веб-страниц"

К списку всех материалов курса. Доступ можно получить в группе вконтакте, в разделе "Ссылки".

Назад Далее