height
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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 |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
Пример
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 |
CSS Box Sizing Module Level 4 # sizing-values |
Совместимость с браузерами
BCD tables only load in the browser