height
======

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

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

Атрибуты `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                                      | (en-US)  
  <length-percentage [0,∞]>                 | (en-US)  
  min-content                               | (en-US)  
  max-content                               | (en-US)  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length>      | (en-US)  
  <percentage>    
  
```

Пример
------

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

### Результат

Проблемы доступности
--------------------

Убедитесь, что элементы с `height` не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Спецификации
------------

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Блочная модель, `width`, `box-sizing`, `min-height`, `max-height`