--- title: height slug: Web/CSS/height translation_of: Web/CSS/height ---
{{CSSRef}}

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

{{EmbedInteractiveExample("pages/css/height.html")}}


Атрибуты {{cssxref("min-height")}} и {{cssxref("max-height")}} при добавлении меняют значение {{Cssxref("height")}}.

Синтаксис

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

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

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

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

Значения

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

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

{{csssyntax}}

Пример:

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

 

Результат

{{EmbedLiveSample('Example', 'auto', 240)}}

 

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

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

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

Спецификация Статус Комментарий
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}} {{Spec2('CSS3 Sizing')}} Добавляет ключевые слова max-content, min-content, available, fit-content .
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}} {{Spec2('CSS3 Transitions')}} Определяет height как анимируемое.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}} {{Spec2('CSS2.1')}} Добавляет поддержку значений {{cssxref("<length>")}} и уточняет, к какому элементу применяется.
{{SpecName('CSS1', '#height', 'height')}} {{Spec2('CSS1')}} Первоначальное определение

{{cssinfo}}

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

{{Compat("css.properties.height")}}

 

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