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

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

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

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