Энциклопедия CSS: height

Свойство height в CSS используется для задания высоты элемента. Как и width, это фундаментальное свойство, определяющее вертикальное пространство, занимаемое элементом на странице. Правильное использование height необходимо для контроля макета, обеспечения читаемости и создания визуально приятных веб-страниц.

Свойство height указывает высоту области контента элемента. Область контента - это пространство внутри элемента, где отображается текст, изображения и другое содержимое. Влияние height на общую высоту элемента зависит от значения свойства box-sizing. По умолчанию, box-sizing имеет значение content-box, что означает, что height определяет только высоту области контента, а padding и border добавляются к этой высоте.

Синтаксис

/* Keyword values */
height: auto;
height: max-content;
height: min-content;
height: fit-content(300px);
/* <length> values */
height: 300px;
height: 2em;
height: 5vh;
/* <percentage> values */
height: 50%;
/* Global values */
height: inherit;
height: initial;
height: unset;

Значения

auto

Это значение по умолчанию. Браузер вычисляет высоту элемента. Обычно, если у элемента блочное отображение и у него нет абсолютно позиционированных дочерних элементов, его высота равна высоте его содержимого. Для абсолютно позиционированных элементов высота обычно вычисляется на основе доступного вертикального пространства.

<length>

Указывает высоту в фиксированной единице измерения. Например:

• px (пиксели)
• em (относительно размера шрифта элемента)
• rem (относительно размера шрифта корневого элемента)
• pt (пункты)
• cm (сантиметры)
• mm (миллиметры)
• in (дюймы)

<percentage>

Указывает высоту в процентах от высоты родительского элемента. Если родительский элемент не имеет явно заданной высоты, процентное значение не будет работать (высота будет auto). Обычно, чтобы процентные высоты работали, у родительских элементов должна быть явно заданная высота (например, в пикселях или через другое процентное значение, в конечном итоге привязанное к корневому элементу).

min-content

Элемент занимает столько места, сколько необходимо для отображения его самого маленького непрерывного содержимого по вертикали. Это полезно в сложных макетах, где нужно, чтобы высота столбцов или строк соответствовала минимально необходимому размеру содержимого.

max-content

Элемент занимает столько места, сколько необходимо для отображения всего содержимого без переносов или обрезания по вертикали. Это может привести к тому, что элемент будет выше, чем его родительский контейнер.

fit-content(<length-percentage>)

Ограничивает высоту элемента максимальным значением, указанным в <length-percentage>. Если содержимое элемента меньше этого значения, элемент займет только необходимое пространство. Если содержимое элемента больше этого значения, элемент будет соответствовать указанному значению, а содержимое может переполниться.

Область применения

Свойство height применяется к блочным (block) и строчно-блочным (inline-block) элементам. На строчные элементы (inline) height не оказывает влияния. Для применения height к строчному элементу, необходимо изменить его тип отображения на block или inline-block с помощью свойства display. Также, важно учитывать, что на абсолютно позиционированные элементы (position: absolute) высота может влиять по-другому, завися от контекста.

Как height взаимодействует с другими свойствами

padding

Padding добавляется к высоте области контента. По умолчанию (box-sizing: content-box), общая высота элемента вычисляется как: height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom.

border

Border также добавляется к высоте области контента. По умолчанию (box-sizing: content-box), общая высота элемента вычисляется как: height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom.

margin

Margin добавляется вне borders. Он не влияет на высоту элемента, а влияет на его позиционирование относительно соседних элементов.

box-sizing

Свойство box-sizing определяет, как вычисляется общая ширина и высота элемента.

• content-box (по умолчанию): width и height определяют только ширину и высоту области контента. padding и border добавляются к этим значениям для получения общей ширины и высоты.
• border-box: width и height определяют общую ширину и высоту элемента, включая padding и border. Область контента сжимается, чтобы вместить padding и border.

Как и в случае с шириной, использование box-sizing: border-box часто упрощает верстку, делая расчеты более предсказуемыми.

Примеры использования

Фиксированная высота

Задание фиксированной высоты элементу:

<div style="height: 200px; border: 1px solid black;"> Этот div имеет высоту 200 пикселей.</div>

Относительная высота

Задание относительной высоты элементу (50% от высоты родительского контейнера):

<div style="height: 50%; border: 1px solid black;"> Этот div занимает 50% высоты родителя. Родитель должен иметь заданную высоту для корректной работы.</div>

min-height и max-height

Ограничение высоты элемента минимальным и максимальным значениями:

<div style="min-height: 100px; max-height: 300px; border: 1px solid black;"> Этот div будет иметь высоту от 100 до 300 пикселей, в зависимости от содержимого и доступного пространства.</div>

Использование height: 100vh;

Задание элементу высоты, равной высоте видимой области экрана (viewport):

<div style="height: 100vh; border: 1px solid black;"> Этот div займет всю видимую высоту экрана.</div>

Применение кода

• Используйте box-sizing: border-box;: Значительно упрощает расчет общей высоты элементов, особенно при работе с padding и border.
• Относительные единицы измерения (%, em, rem, vh): Предпочтительны для создания адаптивных макетов. vh (viewport height) особенно полезен для создания полноэкранных элементов.
• Проверяйте высоту родительского элемента при использовании процентных значений: Если высота родительского элемента не задана, процентное значение не будет работать.
• Внимательно используйте height: 100vh;: Это может привести к проблемам с прокруткой, если контент выходит за пределы видимой области экрана. Рассмотрите возможность использования min-height: 100vh; чтобы элемент занимал минимум высоту экрана, но мог расширяться при необходимости.
• Использование Flexbox или Grid Layout: Современные методы макетирования, такие как Flexbox и Grid Layout, часто являются более эффективными и гибкими способами управления высотой элементов, чем прямое задание height.