• Страница 1 из 1
  • 1
Сделать div на 100% высоты с помощью CSS
Kosten
Четверг, 10 Декабря 2020, 20:20 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Давайте рассмотрим, как можно сделать div на 100%, как по высоте, так и по ширине, чтоб все корректно подходило под окно браузера. Для этого вопроса мы можем использовать vh:1vh равно 1% от высоты области просмотра. Другими словами, 100vh он равен высоте окна браузера, независимо от того, где находится элемент.

Все очень просто:

HTML

Код
<div></div>

CSS

Код
div {
    height: 100vh;
}


Демонстрация

Что такое длина окна просмотра в процентах?

[info]Длины окна просмотра в процентах относятся к размеру исходного содержащего блока. Когда высота или ширина исходного содержащего блока изменяется, они соответственно масштабируются.
[/info]
Это vh(высота области просмотра), vw(ширина области просмотра), vmin(минимальная длина области просмотра) и vmax(максимальная длина области просмотра).
Страна: (RU)
Kosten
Четверг, 10 Декабря 2020, 20:26 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Также если еще варианты на тему как нужно растянуть на 100% по высоте экрана монитора.

HTML

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


Демонстрация

Второй вариант:

Если произошло, что просто свойство не работает, а точнее блок не хочет растягиваться по всей ширине окна браузера.

Ответ:

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

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

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

Код
html, body {height:100%;}


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


Демонстрация
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: