height

Определение

CSS атрибут height позволят обозначать высоту элемента (без padding, border, margin).

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

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

Syntax

/* Keyword value */
height: auto;

/* <length> values */
height: 120px;
height: 10em;

/* <percentage> value */
height: 75%;

/* Global values */
height: inherit;
height: initial;
height: unset;

Значения

<length>

Смотрите <length> .

<проценты>

Specified as a <percentage> of containing block's height.

border-box

If present, the preceding <length> or <percentage> is applied to the element's border box.

content-box

If present, the preceding <length> or <percentage> is applied to the element's content box.

auto

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

fill

Use the fill-available inline size or fill-available block size, as appropriate to the writing mode.

max-content

The intrinsic preferred height.

min-content

The intrinsic minimum height.

available

The containing block height minus vertical margin, border and padding.

fit-content

The larger of:

the intrinsic minimum height
the smaller of the intrinsic preferred height and the available height

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

[<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | auto

Пример:

HTML

<div id="red">
  <span>Мой рост-50px.</span>
</div>
<div id="green">
  <span>Мой рост-25px.</span>
</div>
<div id="parent">
  <div id="child">
    <span>Мой рост-половина родительского элемента.</span>
  </div>
</div>

CSS

div {
  width: 250px;
  margin-bottom: 5px;
  border: 3px solid #999999;
}

#red {
  height: 50px;
}

#green {
  height: 25px;
}

#parent {
  height: 100px;
}

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

Specifications

Specification	Статус	Комментарий
CSS Basic Box Model Определение 'height' в этой спецификации.	Рабочий черновик	Added the `max-content`, `min-content`, `available`, `fit-content`, `border-box`, `content-box` keywords.
CSS Transitions Определение 'height' в этой спецификации.	Рабочий черновик	Lists `height` as animatable.
CSS Level 2 (Revision 1) Определение 'height' в этой спецификации.	Рекомендация	Adds support for the `<length>` values and precises on which element it applies to.
CSS Level 1 Определение 'height' в этой спецификации.	Рекомендация	Initial definition
CSS Intrinsic & Extrinsic Sizing Module Level 3 Определение 'width' в этой спецификации.	Рабочий черновик	Adds new sizing keywords for width and height.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 или ранее)	4.0	7.0	1.0
`fill`, `fit-content`, `min-content`, `max-content`	46.0

Feature	Android	Android Webview	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Базово поддерживается	1.0	(Да)	1.0 (1)	6.0	6.0	1.0	(Да)
`fill`, `fit-content`, `min-content`, `max-content`	?	46.0					46.0

Смотрите также

box model, width, box-sizing, min-height, max-height