height

Пример

<div class="banner">Высота 6rem</div>

.banner {
  height: 6rem;
  padding: 1rem;
  background: lavender;
}

Синтаксис

height: auto | <box-size> | <anchor-size()>;

Начальное значение

auto

Применяется к

всем элементам, кроме строчных незаменяемых, колонок и групп колонок таблицы

Наследуется

нет

Анимируется

как длина или процент; ключевые слова — дискретно

Вычисляемое значение

процент или auto как указано, длины — в абсолютных единицах

Значения

auto

Высота по содержимому. Значение по умолчанию.

Длина

Точная высота: 200px, 10rem, 50vh.

Процент

Процент от высоты содержащего блока — но только если она задана явно. Иначе процент считается как auto.

min-content, max-content, fit-content

Высота по содержимому. Для обычного блока с горизонтальным письмом все три дают то же, что auto.

Как понять

Высота в вебе обычно следует за содержимым: чем больше текста, тем выше блок. Если задать высоту жёстко, а текста окажется больше — например, на узком экране или при крупном шрифте, — он вылезет за границы блока. Поэтому вместо height часто пишут min-height: блок будет не ниже заданного, но сможет расти.

С процентами есть ловушка: height: 100% работает, только если у родителя явная высота, а у того — у своего родителя, и так до корня. Проще использовать единицы экрана (vh, dvh) или раскладку флекса и сетки, которые растягивают элементы сами.

Примеры

Первый экран на всю высоту

min-height в единицах dvh учитывает панели мобильного браузера, которые появляются и прячутся при прокрутке:

<section class="hero">Заголовок первого экрана</section>

.hero {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  background: honeydew;
}

Прокрутка внутри блока

Ограниченная высота и overflow: auto дают блок с собственной прокруткой:

<ul class="list">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
  <li>Пункт 5</li>
  <li>Пункт 6</li>
  <li>Пункт 7</li>
  <li>Пункт 8</li>
</ul>

.list {
  height: 8rem;
  overflow: auto;
  border: 1px solid;
}

Подсказки

• height: 100% не работает, если у родителя высота auto. Проверьте всю цепочку предков или замените на флекс, сетку или dvh.
• 100vh на телефонах бывает выше видимой области из-за панелей браузера. Пишите 100dvh, а 100vh оставьте строкой выше как запасной вариант.
• Для текстовых блоков выбирайте min-height, а не height: иначе при увеличении шрифта текст вылезет за блок.
• В логических свойствах высоте соответствует block-size.