height

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

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

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

Синтаксис

/* Значення <length> */
height: 120px;
height: 10em;
height: 100vh;

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

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

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

Значення

<length>

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

<percentage>

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

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

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

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

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

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

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

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

Рамки використають доступний простір, але ні в якому разі не вийдуть за межі max-content

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>)).

clamp()

Дає змогу вибрати середнє значення з діапазону значень між заданими мінімумом та максимумом.

Занепокоєння щодо доступності

Слід пересвідчитись, що елементи, для котрих вказана 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