CSS свойство height

Определение и применение

CSS свойство height устанавливает высоту области содержимого элемента. Свойства min-height и max-height могут переопределить высоту.

При box-sizing: content-box размер относится к содержимому; границы и внутренние отступы добавляются снаружи. При box-sizing: border-box они включены в заданный размер. Внешние отступы не входят в размер в обоих случаях.

Следующие формулы описывают размер внешнего края рамки при box-sizing: content-box. При border-box рамка и внутренние отступы уже включены в заданный размер; область содержимого при этом не может стать меньше нуля.

• Общая высота элемента вычисляется по формуле:
  height (высота) + padding-top (верхний отступ) + padding-bottom(нижний отступ) + border-top (верхняя граница) + border-bottom(нижняя граница).


• Общая ширина элемента вычисляется по формуле:
  width (ширина) + padding-left (левый отступ) + padding-right(правый отступ) + border-left (левая граница) + border-right(правая граница).

Проверьте, как внутренние отступы и рамка влияют на высоту блока в тренажёре размеров и позиционирования CSS: исследуйте блочную модель и закрепите её в заданиях.

Попробуйте значения height

<div class="stage">
  <div class="demo-target">Размер блока</div>
</div>

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  border: 2px dashed #607589;
  background: #edf2f5;
  font: 16px/1.4 system-ui;
  color: #172c3d;
}
.demo-target {
  background: #ffe4bd;
  border: 3px solid #245a85;
  padding: 12px;
  height: 60px;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  border: 2px dashed #607589;
  background: #edf2f5;
  font: 16px/1.4 system-ui;
  color: #172c3d;
}
.demo-target {
  background: #ffe4bd;
  border: 3px solid #245a85;
  padding: 12px;
  height: 120px;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  border: 2px dashed #607589;
  background: #edf2f5;
  font: 16px/1.4 system-ui;
  color: #172c3d;
}
.demo-target {
  background: #ffe4bd;
  border: 3px solid #245a85;
  padding: 12px;
  height: 180px;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  border: 2px dashed #607589;
  background: #edf2f5;
  font: 16px/1.4 system-ui;
  color: #172c3d;
}
.demo-target {
  background: #ffe4bd;
  border: 3px solid #245a85;
  padding: 12px;
  height: auto;
}

Поддержка браузерами

Спецификации: CSS sizing, CSS sizing

✓Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (2) поддерживаются не везде — смотрите таблицу.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.properties.height

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
height	✓1	✓12	✓1	✓7	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
anchor-size	✓125	✓125	✓147	✓111	✓26	✓125	✓147	✓83	✓26	✓27.0	✓125	✓26
auto	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
fit-content	✓46	✓79	✓94…	✓33	✓11…	✓46	✓94…	✓33	✓11…	✓5.0	✓46	✓11…
fit-content()	×Нет	×Нет	◐91…	×Нет	×Нет	×Нет	×Нет	×Нет	×Нет	×Нет	×Нет	×Нет
max-content	✓46	✓79	✓66…	✓44	✓11	✓46	✓66…	✓43	✓11	✓5.0	✓46	✓11
min-content	✓46	✓79	✓66…	✓44	✓11	✓46	✓66…	✓43	✓11	✓5.0	✓46	✓11
stretch	✓138…	✓138…	◐146…	✓122…	✓27…	✓138…	◐146…	✓91…	✓27…	◐5.0…	✓138…	✓27…
Ещё 4 значений · ✓ поддерживаются везде более 3 летСвернуть

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

CSS синтаксис:

height: auto | <length-percentage [0,∞]> |
  min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) |
  <calc-size()> | <anchor-size()> | stretch;

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

| — выбор варианта; [ ] — группа, а внутри типа — допустимый диапазон; ∞ — отсутствие верхней границы.

JavaScript синтаксис:

element.style.height = "100px";

Начальное значение свойства

auto.

Значения свойства

В обычном потоке процентная height требует определённой высоты содержащего блока; при высоте по содержимому она обычно ведёт себя как auto. Одна min-height не всегда даёт такую базу. Сравните два родительских блока; у Flexbox, Grid и абсолютного позиционирования есть дополнительные правила определения размеров.

Спецификация

CSS Box Sizing — спецификация height.

Наследуется

Нет.

Анимируемое

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

Примеры, попробуйте сами

Высота блока

В варианте A высота зависит от содержимого, в B задана явно. Измените 120px на 180px. Добавьте текст в HTML, чтобы сравнить поведение auto и фиксированной высоты.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 24px;
}
section {
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.stage {
    background: #f1f4f7;
    outline: 1px dashed #8495a5;
}
.sample {
    background: #c5dbea;
    padding: 8px;
    overflow-wrap: anywhere;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Высота блока</title>
  </head>
  <body>
    <div class="comparison">
      <section>
        <h3>Вариант A</h3>
        <div class="stage"><div class="sample first">Текст</div></div>
      </section>
      <section>
        <h3>Вариант B</h3>
        <div class="stage"><div class="sample second">Текст</div></div>
      </section>
    </div>
  </body>
</html>

style.css

CSS

.first {
    height: auto;
}
.second {
    height: 120px;
}

Процентная высота и размер родителя

У обоих детей height: 50%. Родитель A имеет height: 160px, поэтому ребёнок получает 80px. Высота родителя B зависит от содержимого: процентная высота ребёнка ведёт себя как auto. Задайте второму родителю height: 160px и сравните.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Процентная высота и размер родителя</title>
  </head>
  <body>
    <h3>A</h3>
    <div class="parent fixed"><div class="child">Половина высоты</div></div>
    <h3>B</h3>
    <div class="parent"><div class="child">Высота по содержимому</div></div>
  </body>
</html>

style.css

CSS

.parent {
    border: 2px solid;
}
.fixed {
    height: 160px;
}
.child {
    height: 50%;
    background: #b8d9ee;
    color: #172c3d;
}