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)                 | (en-US)
  min-content                               | (en-US)
  max-content                               | (en-US)
  fit-content( <length-percentage [0,∞]> (en-US) )  

<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 не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.

Спецификации

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

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