CSS атрибут height
позволят обозначать высоту элемента. По умолчанию, свойство определяет высоту внутренней области. Если box-sizing
имеет значение border-box
, то свойство будет определять высоту области рамки.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Атрибуты 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-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