Эта страница была переведена с английского языка силами сообщества. Вы тоже можете внести свой вклад, присоединившись к русскоязычному сообществу MDN Web Docs.

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 
Наибольшее из:
  • внутренняя минимальная высота
  • меньшая из внутренней предпочтительной высоты и доступной высоты

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

height = 
  auto                                | (en-US)
  <length-percentage>                 | (en-US)
  min-content                         | (en-US)
  max-content                         | (en-US)
  fit-content( <length-percentage> )  

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

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

Specification
CSS Box Sizing Module Level 3
# preferred-size-properties

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

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

BCD tables only load in the browser

 

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