height

Властивість CSS height (висота) вказує висоту елемента. Усталено властивість визначає висоту області вмісту. Втім, якщо властивість box-sizing має значення border-box, то вказане значення стає висотою області меж.

Спробуйте його в дії

Властивості min-height та max-height зневажають height.

[!NOTE] Як геометрична властивість, height також застосовується до елементів SVG <svg>, <rect>, <image> і <foreignObject>, причому auto вирішується як 100% для <svg> і як 0 для інших елементів, а відсоткові значення відносні щодо висоти області перегляду SVG для <rect>. Значення властивості CSS height перемагає значення атрибута SVG width, якщо на елементі SVG такий задано.

Синтаксис

/* Значення <length> */
height: 120px;
height: 10em;
height: 100vh;
height: anchor-size(height);
height: anchor-size(--myAnchor self-block, 250px);
height: clamp(200px, anchor-size(width));

/* Значення <percentage> */
height: 75%;

/* Значення – ключові слова */
height: max-content;
height: min-content;
height: fit-content;
height: fit-content(20em);
height: auto;
height: minmax(min-content, anchor-size(width));

/* Глобальні значення */
height: inherit;
height: initial;
height: revert;
height: revert-layer;
height: unset;

Значення

<length>

Визначає висоту у вигляді значення відстані.

<percentage>

Визначає висоту у вигляді відсотків від висоти контейнерного блока.

auto (автоматично)

Браузер обчислить та обере висоту для обраного елемента.

max-content (максимальний вміст)

Внутрішньо бажана висота.

min-content (мінімальний вміст)

Внутрішньо найменша можлива ширина.

fit-content (припасувати вміст)

Використовує доступний простір, але не більше, ніж max-content, тобто min(max-content, max(min-content, stretch)).

fit-content(<a href="/uk/docs/Web/CSS/length-percentage"><code>&lt;length-percentage&gt;</code></a>)

Використовує формулу fit-content щодо доступного простору, заміненого вказаним аргументом, тобто min(max-content, max(min-content, <length-percentage>)).

stretch

Задає висоті рамки зовнішніх відступів елемента висоту його контейнерного блока. Намагається змусити рамку зовнішніх відступів заповнити доступний у контейнерному блоці простір так, щоб це вийшло схоже на 100%, але застосовуючи результівний розмір до рамки зовнішніх відступів, а не рамки, визначеної box-sizing.

[!NOTE] Аби перевірити псевдоніми значення stretch, що використовуються браузерами, та статус реалізації цього значення, дивіться наш розділ Сумісності з браузерами.

Доступність

Слід пересвідчитись, що елементи, для котрих вказана height, не обрізаються і не затуляються іншим вмістом, коли до сторінки застосовується збільшення для укрупнення тексту.

• MDN Розуміння WCAG, Пояснення Настанов 1.4
• Розуміння мірила успіху 1.4.4 | W3C Розуміння WCAG 2.0

Формальне визначення

Формальний синтаксис

auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)
де 
<length-percentage> = <length> | <percentage>

Приклади

Встановлення висоти за допомогою пікселів та відсотків

HTML

<div id="taller">Я – 50 пікселів заввишки.</div>
<div id="shorter">Я – 25 пікселів заввишки.</div>
<div id="parent">
  <div id="child">Я маю половину висоти предка.</div>
</div>

CSS

div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#taller {
  height: 50px;
}

#shorter {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}

Результат

Специфікації

Сумісність із браузерами

Дивіться також

• Блокова модель
• width
• box-sizing
• min-height, max-height
• Відповідні логічні властивості: block-size, inline-size
• anchor-size()
• clamp()
• minmax()