Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Определение

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

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

Начальное значениеauto
Применяется квсе элементы, кроме незаменяемых строчных элементов, табличных колонок и групп колонок
Наследуетсянет
ПроцентыПроцент для генерируемого блока рассчитывается по отношению к высоте содержащего блока. Если высота содержащего блока не задана явно (т.е. зависит от высоты содержимого), и этот этот элемент позиционирован не абсолютно, значение будет auto. Процентная высота на корневом элементе относительна первоначальному блоку.
Отображениевизуальный
Обработка значенияпроцент, auto или абсолютная длина
Animation typeдлина, проценты или 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> как абсолютного значения.
<проценты>
Определени высоты как процентного отношения к высоте блочного элемента.
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 
Блочная высота, без учета отступов от других элементов по вертикали, границы и внутренних отступов.
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.

Совместимость с браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

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

Метки документа и участники

Внесли вклад в эту страницу: Antin74, VladdOs
Обновлялась последний раз: Antin74,