Как растянуть div на 100% по вертикали (CSS)

Мы регулярно выпускаем такие полезные статьи. Подпишитесь на наш Телеграм-канал, чтобы получать оповещения о новых публикациях.

Задача

Растянуть div по вертикали на 100% относительно родительского блока или экрана. Резиновая высота div.

Решение

Ваш div займет 100% по вертикали только в том случае, если высота родительского блока задана 100%. Так что последовательно прописываем высоту 100% у всех блоков по иерархии, включая body и html.

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

Резиновый по вертикали сайт

Таким же образом мы можем задать высоту внутреннего div не 100%, а меньше, тем самым обеспечив сохранение пропорций верстки на разных экранах по вертикали.

Пример

<html>

<head>

<style type="text/css">

html {

height: 100%;

}

body {

height: 100%;

}

html, body

{

margin: 0;

padding: 0;

}

.page {

height: 100%;

width: 100px;

}

</style>

</head>

<body>

<div class="page">

content

</div>

</body>

</html>

ОСТАВЬТЕ КОММЕНТАРИЙ ПЕРВЫМ!

РАЗВЕРНУТЬ СТАТЬИ ПО ТЕМЕ

Д е й с т в у й !
Оставьте ваши контакты и мы ответим в течение 10 минут.
Ваша заявка принята!

Рассылка Reconcept, подпишитесь на наш полезный блог

Ваша заявка принята!