10 августа 2015 Статья №86

Как растянуть 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>