Простой способ растянуть блок на всю высоту экрана, или 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 .
section < height: 100vh; /* высота секции равна высоте области просмотра */ >
Поддержка браузерами
Довольно много браузеров поддерживают эти единицы измерения, что не может не радовать. С последними версиями Chrome, Safari, Opera и Firefox проблем нет. IE начиная с девятой версии имеет частичную поддержку. Проблема с мобильными браузерами: Opera Mini вообще не поддерживает эти единицы, Android Browser поддерживает их только с версии 4.4. Ознакомиться с подробной статистикой.
Как растянуть блок по высоте css
Для того, что бы растянуть блок на всю высоту страницы, можно выставить height у выбранного элемента и у всех его предков вплоть до html — 100%. Но обычно так не делают, вместо этого используются не процентные значения а, единицы относительной длины — vh и vw. Эти аббревиатуры можно расшифровать, как viewport height и viewport width — высота и ширина области просмотра соответственно. 1vh равен одному проценту от высоты области просмотра, 1vw равняется одному проценту от ширины области просмотра.
class="all-height">
.all-height background-color: #38d9a9; height: 100vh; width: 200px; >
При просмотре на всю высоту окна браузера будет отображена бирюзовая полоса шириной в 200px.
растянуть блок на всю высоту экрана пользователя
Растянуть страницу на всю высоту экрана
Использую MasterPage. В него кидаю таблицу 3х3, в центральной ячейке которой находится.
Растянуть полосы таблицы вертикально на всю высоту экрана
Здравствуйте. Столкнулся с проблемой вёрстки таблицы, а именно нужно сделать продолжение полосок.
Растянуть блок на всю высоту
Имеется блок див, который должен быть: Растянут на всю высоту окна — 20px, если контента мало.
Центральный блок должен растягиваться на всю высоту экрана, а не на высоту контента
Всем привет. Сразу к делу. Сайт делаю резиновым. Структура сайта по сути из трёх блоков. Шапка.
Как растянуть блок на всю высоту страницы?
Вопрос по CSS . Задача: есть высокий блок-контейнер, он по высоте не помещается на один экран (например, div , в котором много параграфов), надо задать фон этому блоку-контейнеру, чтобы он был закрашен полностью. Нашел вот такое решение: задать всем блокам-родителям height: 100%; , а блоку-контейнеру задать min-height: 100%; . Вот пример:
html, body < height: 100%; >div
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
Не понимаю, почему это работает. Похоже на «шаманство». min-height задает минимальную высоту. Получается, что минимальная высота содержимого дива равна 100% высоты содержимого div . Посмотрел в devtools, выяснилось, что div может быть по высоте больше, чем body и html .
Отслеживать
34.4k 15 15 золотых знаков 65 65 серебряных знаков 94 94 бронзовых знака
задан 4 янв 2017 в 13:37
2,049 3 3 золотых знака 18 18 серебряных знаков 35 35 бронзовых знаков
что собственно вам не понятно? как по другому сделать высоту блока на всю страницу?
4 янв 2017 в 13:41
мне не понятно, почему это работает. как связана минимальная высота с высотой на всю страницу?
4 янв 2017 в 13:45
высота родителя — 100% страницы. минимальная высота вашего блока — 100% родителя -> 100% страницы. Можете задать блоку высоту в 100vh, результат будет тот же) про эти единицы измерения можете поискать информацию. ее полно)
4 янв 2017 в 13:53
правильно, а минимальная высота вашего блока — 100% боди — что и есть 100% страницы. Просто для этих целей используйте height: 100vh)
4 янв 2017 в 13:58
высота боди — 100% высоты хтмл, высота хтмл — 100% высоты вьюпорта. а вьюпорт — это область просмотра, а не вся страница
4 янв 2017 в 14:04
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Почему это работает?
Потому что div просто переполняет (вылазит за границы) body и всё. Задавая overflow: hidden; для body мы увидим, что div просто обрезается (если высота экрана небольшая).
html, body < height: 100%; overflow: hidden; >div
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
text text text text
Как с этим быть?
Это задавание height: 100%; блокам всех уровней вложенности довольно неудобно. Задайте просто нужному вам блоку min-height: 100vh; , где vh — единицы высоты экрана. У body тогда будет по умолчанию height: auto; и body просто будет подстраиваться под содержимое.
Отслеживать
ответ дан 4 янв 2017 в 13:53
Vadim Ovchinnikov Vadim Ovchinnikov
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака
спасибо за ответ. не понимаю, как связана минимальная высота с высотой на всю страницу
4 янв 2017 в 14:02
я знаю, что див переполняется. и что при задании overflow: hidden; это переполнение «обрезается». вопрос в том, как див по высоте оказался больше боди и хтмл
4 янв 2017 в 14:14
Да потому что body и html , когда им задают 100% занимают один экран. А div занимает минимум один экран, но может и больше (как в данном случае) при min-height: 100%; .
4 янв 2017 в 14:20
@Dimon Вам помог ответ на вопрос?
4 янв 2017 в 14:24
идею с 100vh подкинули
4 янв 2017 в 15:24
Работу min-height: 100% можно понять на примере с установкой прилипающего футера. При этом есть стили:
* < margin: 0; padding: 0; >html, body, .wrapper < height: 100%; >.content < box-sizing: border-box; min-height: 100%; padding-bottom: 90px; >.footer
ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй
ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц
ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу
ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк
еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее
При этом min-height: 100% работает ТАК:
- Если СОДЕРЖИМОГО МАЛО у блока content , то его высота МИНИМАЛЬНО равна 100% высоты вьюпорта ( wrapper — это 100% от высоты body , body — это 100% от высоты html , а html — это 100% от высоты viewport ). При этом у блока content есть нижний paddind -буфер отрицательный, а у блока блока footer есть отрицательный margin , который позволяет в случае, когда много содержимого, «наползти» на этот padding -буфер.
- Если же содержимое НЕ ВЛЕЗАЕТ на экран (содержимого МНОГО в блоке content ), то высота определяется содержимым — содержимое растягивает.
Еще раз повторю, чтобы все запомнили — если содержимого мало, высота блока равна высоте вьюпорта (это и есть МИНИМАЛЬНОЕ значение высоты, то есть, меньше быть не может, а больше — пожалуйста, если сможешь растянуть содержимым), если много — высота блока БОЛЬШЕ высоты вьюпорта и определяется содержимым, которое на эту высоту и растягивает.