Глиф Учебники

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

Справочник · HTML и CSS · 2 минуты чтения

Блок на всю высоту окна браузера:

CSS
.hero {
  min-height: 100vh;
  min-height: 100dvh;
}

vh — сотая доля высоты окна, 100vh — вся высота. Вторая строка с dvh — для телефонов: там адресная строка браузера то показывается, то прячется, и 100vh получается выше видимой части экрана. 100dvh учитывает это и равен высоте, видимой прямо сейчас. Браузер, который не знает dvh, пропустит вторую строку и возьмёт первую.

min-height, а не height: если содержимого больше экрана, блок вырастет, а не обрежет его.

Не забудьте убрать стандартный отступ у body, иначе появится лишняя прокрутка на 16 пикселей:

CSS
body {
  margin: 0;
}

Почему не работает height: 100%

Проценты высоты отсчитываются от высоты родителя. А высота обычного блока — это высота его содержимого, и 100 % от неё не растягивают ничего. Чтобы height: 100% сработал, высота должна быть задана у всей цепочки родителей до html:

CSS
html,
body {
  height: 100%;
  margin: 0;
}

.page {
  height: 100%;
}

Это старый способ. Обычно проще задать нужному блоку min-height: 100vh и не трогать родителей.

Подвал внизу, даже если текста мало

На короткой странице подвал поднимается к середине экрана. Чтобы прижать его к низу:

CSS
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

HTML при этом — <header>, <main> и <footer> прямо внутри <body>. body становится колонкой на всю высоту окна, а main с flex: 1 забирает всё свободное место и отодвигает подвал вниз. Когда текста много, страница просто прокручивается, как обычно.

Колонки одинаковой высоты

Колонки во флекс-контейнере по умолчанию растягиваются по самой высокой (align-items: stretch):

CSS
.columns {
  display: flex;
  gap: 20px;
}

.columns > div {
  flex: 1;
  background-color: #f2f2f2;
}

Фон у всех колонок дойдёт до низа, даже если текста в них разное количество. Так же ведут себя ячейки одной строки Grid.

Подводные камни