height

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

* Some parts of this feature may have varying levels of support.

CSS атрибутheight позволят обозначать высоту элемента. По умолчанию, свойство определяет высотувнутренней области. Еслиbox-sizing имеет значениеborder-box, то свойство будет определять высотуобласти рамки.

Интерактивный пример

height: 150px;

height: 6em;

height: 75%;

height: auto;

<section>  <div>    This is a box where you can change the height.  </div></section>

#example-element {  display: flex;  flex-direction: column;  background-color: #5b6dcd;  justify-content: center;  color: #ffffff;}

Атрибутыmin-height иmax-height при добавлении меняют значениеheight.

Синтаксис

css

/* Ключевые слова */height: auto;/* <length> значения */height: 120px;height: 10em;/* <percentage> значения */height: 75%;/* Глобальные значения */height: inherit;height: initial;height: unset;

Значения

<length>

Высота - фиксированная величина.

<percentage>

Высота в процентах - размер относительно высоты родительского блока.

border-boxЭкспериментальная возможность

Если присутствует, то предшествующие<length> или<percentage> применяются к области рамки элемента.

content-boxЭкспериментальная возможность

Если присутствует, то предшествующие<length> or<percentage> применяются к внутренней области элемента.

auto

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

fillЭкспериментальная возможность

Используетfill-available размер строки илиfill-available размер блока, в зависимости от способа разметки.

max-contentЭкспериментальная возможность

Внутренняя максимальная предпочтительная высота.

min-contentЭкспериментальная возможность

Внутренняя минимальная предпочтительная высота.

availableЭкспериментальная возможность

Высота содержащего блока минус вертикальныеmargin, border иpadding.

fit-contentЭкспериментальная возможность

Наибольшее из:

внутренняя минимальная высота
меньшая из внутренней предпочтительной высоты и доступной высоты

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

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

<length-percentage> =
<length>|
<percentage>

<calc-size()> =
calc-size(<calc-size-basis> ,<calc-sum>)

<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)

<calc-size-basis> =
<size-keyword>|
<calc-size()>|
any|
<calc-sum>

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

Пример

HTML

html

<div>Я 50 пикселей в высоту.</div><div>Я 25 пикселей в высоту.</div><div>  <div>Моя высота - половина от высоты родителя.</div></div>

CSS

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%;}

Specification
CSS Box Sizing Module Level 3 # preferred-size-properties
CSS Box Sizing Module Level 4 # sizing-values

Начальное значение	`auto`
Применяется к	все элементы, кроме незаменяемых строчных элементов, табличных колонок и групп колонок
Наследуется	нет
Проценты	Процент для генерируемого блока рассчитывается по отношению к высоте содержащего блока. Если высота содержащего блока не задана явно (т.е. зависит от высоты содержимого), и этот этот элемент позиционирован не абсолютно, значение будет`auto`. Процентная высота на корневом элементе относительна первоначальному блоку.
Обработка значения	процент,`auto` или абсолютная длина
Animation type	длина,проценты или calc();