Как растянуть элемент на всю высоту css
Перейти к содержимому

Как растянуть элемент на всю высоту css

  • автор:

 

Простой способ растянуть блок на всю высоту экрана, или CSS3 Viewport Units

В этой статье я познакомлю вас с появившимися в CSS3 единицами измерения vw, vh, vmin и vmax.

Что такое «Viewport Units»

Viewport Units — это относительные единицы измерения, рассчитывающиеся в процентах от размеров области просмотра браузера. Эти единицы измерения появились в третьей версии спецификации CSS .

Единицы измерения vh и vw

vh и vw можно расшифровать, как viewport height и viewport width — высота и ширина области просмотра соответственно. 1vh равен одному проценту от высоты области просмотра, 1vw равняется одному проценту от ширины области просмотра.

Единицы измерения vmin и vmax

vmin и vmax расшифровывается, как viewport minimal и viewport maximal. 1vmin сравнивает значения 1vh и 1vw , выбирая меньшее из них. 1vmax делает то же самое, но выбирает большее из двух значений. Иначе говоря, если у смартфона ширина экрана меньше высоты, то vmin будет рассчитываться относительно ширины, а vmax будет рассчитываться относительно высоты экрана.

Пример использования

Сейчас в тренде использование полноэкранных секций. Особенно часто их используют в лендингах. Есть много способов сделать такую секцию, однако самый простой и изящный способ — применить единицу измерения vh .

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

Сергей Веснин

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

 

Задача

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

Решение

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

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

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

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

Как растянуть блок div по высоте окна браузера?

Современные браузеры позволяют посредством CSS3 растянуть блок по всей высоте видимой области. Однако с браузерами предшественниками, не поддерживающие стандарт CSS3 всё гораздо иначе. Есть случаи, при которых можно обойтись без CSS3 в старых браузерах и растянуть блок по высоте, не прибегая к JavaScript. Если блок расположен непосредственно после тега body, то достаточно задать высоту для тега html, body, а так же самого div, величиной 100%.

В современных браузерах есть поддержка CSS3, а это значит, что есть возможность использования обозначения единицы измерения vh, которая укажет браузеру, что нужно задать значение в процентах от размера самого окна браузера. И в этом случае следующая запись могла вполне может быть уместной для того чтобы растянуть блок div по высоте:

Второй вариант более практичный, так как поддерживается большинством браузеров, вне зависимости от того есть ли у браузера поддержка CSS3 или нет. Здесь будет задействован javascript наряду с jquery. Используя $(window).height мы можем получить высоту окна браузера, после чего нам достаточно задать эту высоту для блока, чтобы растянуть div по высоте окна браузера.

Второй способ позволяет растянуть блок div по высоте практически во всех браузерах, где есть поддержка JavaScript. CSS3 в скором времени будет использоваться повсеместно. Однако есть процент пользователей, использующих браузеры без поддержки этого стандарта. Использовать какой либо из примеров или нет — решение за вами, на этом пока всё, спасибо за внимание.

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *