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

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

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-contentmin-contentavailablefit-content .
CSS Transitions
Определение 'height' в этой спецификации.
Рабочий черновик Определяет height как анимируемое.
CSS Level 2 (Revision 1)
Определение 'height' в этой спецификации.
Рекомендация Добавляет поддержку значений <length> и уточняет, к какому элементу применяется.
CSS Level 1
Определение 'height' в этой спецификации.
Рекомендация Первоначальное определение
Начальное значениеauto
Применяется квсе элементы, кроме незаменяемых строчных элементов, табличных колонок и групп колонок
Наследуетсянет
ПроцентыПроцент для генерируемого блока рассчитывается по отношению к высоте содержащего блока. Если высота содержащего блока не задана явно (т.е. зависит от высоты содержимого), и этот этот элемент позиционирован не абсолютно, значение будет auto. Процентная высота на корневом элементе относительна первоначальному блоку.
Обработка значенияпроцент, auto или абсолютная длина
Animation typeдлина, проценты или calc();

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
heightChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 7Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
fit-contentChrome Полная поддержка 46Edge Полная поддержка 79Firefox Нет поддержки НетIE Нет поддержки НетOpera Полная поддержка 33Safari Полная поддержка 11
Полная поддержка 11
Полная поддержка 9
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 46Chrome Android Полная поддержка 46Firefox Android Нет поддержки НетOpera Android Полная поддержка 33Safari iOS Полная поддержка 11
Полная поддержка 11
Полная поддержка 9
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 5.0
max-contentChrome Полная поддержка 46Edge Полная поддержка 79Firefox Полная поддержка 66
Полная поддержка 66
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 11WebView Android Полная поддержка 46Chrome Android Полная поддержка 46Firefox Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43Safari iOS Полная поддержка 11Samsung Internet Android Полная поддержка 5.0
min-contentChrome Полная поддержка 46Edge Полная поддержка 79Firefox Полная поддержка 66
Полная поддержка 66
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 11WebView Android Полная поддержка 46Chrome Android Полная поддержка 46Firefox Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43Safari iOS Полная поддержка 11Samsung Internet Android Полная поддержка 5.0
stretchChrome Полная поддержка 28
Альтернативное имя
Полная поддержка 28
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Edge Полная поддержка 79
Альтернативное имя
Полная поддержка 79
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Firefox Нет поддержки НетIE Нет поддержки НетOpera Полная поддержка 15
Альтернативное имя
Полная поддержка 15
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Safari Полная поддержка 9
Альтернативное имя
Полная поддержка 9
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
WebView Android Полная поддержка 4.4
Альтернативное имя
Полная поддержка 4.4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Chrome Android Полная поддержка 28
Альтернативное имя
Полная поддержка 28
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Firefox Android Нет поддержки НетOpera Android Полная поддержка 15
Альтернативное имя
Полная поддержка 15
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Safari iOS Полная поддержка 9
Альтернативное имя
Полная поддержка 9
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Samsung Internet Android Полная поддержка 5.0
Альтернативное имя
Полная поддержка 5.0
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Использует нестандартное имя.
Использует нестандартное имя.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

 

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