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.

Learn more
See full compatibility

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

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

height: 150px;

height: 6em;

height: 75%;

height: auto;

<section class="default-example" id="default-example">
 <div class="transition-all" id="example-element">
 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 id="taller">Я 50 пикселей в высоту.</div>
<div id="shorter">Я 25 пикселей в высоту.</div>
<div id="parent">
 <div id="child">Моя высота - половина от высоты родителя.</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();