height

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


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

Синтаксис

/* Значения-ключевые слова */
height: auto;

/* <length> значения */
height: 120px;
height: 10em;

/* <percentage> значения */
height: 75%;

/* Глобальные значения */
height: inherit;
height: initial;
height: unset;

Значения

<length>
Высота - фиксированная величина.
<percentage>
Высота в процентах - размер относительно высоты родительского блока.
border-box  Это экспериментальное API, которое не должно использоваться в рабочем коде.
Если присутствует, то предшествующие <length> или <percentage> применяются к области рамки элемента.
content-box  Это экспериментальное API, которое не должно использоваться в рабочем коде.
Если присутствует, то предшествующие <length> or <percentage> применяются к внутренней области элемента.
auto
Браузер рассчитает и выберет высоту для указанного элемента.
fill  Это экспериментальное API, которое не должно использоваться в рабочем коде.
Использует fill-available размер строки или fill-available размер блока, в зависимости от способа разметки.
max-content  Это экспериментальное API, которое не должно использоваться в рабочем коде.
Внутренняя максимальная предпочтительная высота.
min-content  Это экспериментальное API, которое не должно использоваться в рабочем коде.
Внутренняя минимальная предпочтительная высота.
available  Это экспериментальное API, которое не должно использоваться в рабочем коде.
Высота содержащего блока минус вертикальные margin, border и padding.
fit-content  Это экспериментальное API, которое не должно использоваться в рабочем коде.
Наибольшее из:
  • внутренняя минимальная высота
  • меньшая из внутренней предпочтительной высоты и доступной высоты

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

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)
где 
<length-percentage> = <length> | <percentage>

Пример:

HTML

<div id="taller">Я 50 пикселей в высоту.</div>
<div id="shorter">Я 25 пикселей в высоту.</div>
<div id="parent">
  <div id="child">
    Моя высота - половина от высоты родителя.
  </div>
</div>

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

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

Спецификация Статус Комментарий
CSS Box Sizing Module Level 3
Определение 'width' в этой спецификации.		 Рабочий черновик Добавляет ключевые слова max-content, min-content, available, fit-content .
CSS Transitions
Определение 'height' в этой спецификации.		 Рабочий черновик Определяет height как анимируемое.
CSS Level 2 (Revision 1)
Определение 'height' в этой спецификации.		 Рекомендация Добавляет поддержку значений <length> и уточняет, к какому элементу применяется.
CSS Level 1
Определение 'height' в этой спецификации.		 Рекомендация Первоначальное определение

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

Поддержка браузерами

BCD tables only load in the browser

 

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