Справочник HTML & CSS

height

Высота элемента.

Синтаксис

height: value;

Значения

Параметр	Тип	Описание
px	length	Фиксированная высота.
%	percentage	Процент от высоты родителя — работает, только если высота родителя задана.
auto	keyword	По высоте содержимого (по умолчанию).
vh \| dvh	length	Доля высоты окна: `100dvh` — весь экран.

Примеры

Автоматическая и фиксированная высота:

<style>
  div { background: lavender; margin-bottom: 6px; padding: 6px; }
</style>
 
<div>auto — as tall as the content</div>
<div style="height: 80px;">80px</div>

Фиксированная высота с прокруткой для длинного содержимого:

<div style="height: 60px; overflow: auto; border: 1px solid gray;">
  A block with a fixed height. When the text is longer than the block, it scrolls instead of spilling out over the content below.
</div>

Примечания

Не задавайте фиксированную высоту блокам с текстом: при крупном шрифте или длинном переводе текст вылезет. Берите min-height — так блок сможет расти.

См. также

width — Ширина элемента.
max-height — Максимальная высота: элемент растёт вместе с содержимым только до этого предела.
overflow — Что делать с содержимым, которое не помещается в элемент.
px, em, rem, %, vw, vh — Единицы длины в CSS: абсолютные пиксели и относительные единицы.

Вопросы и ответы по теме

В учебнике

Блочная модель — Из чего состоит элемент в CSS — содержимое, padding, border и margin, размеры, центрирование и box-sizing.

Спасибо, что читаете!