min-height¶
Свойство min-height
задаёт минимальную высоту элемента.
Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height
, max-height
и min-height
.
Если значение высоты (height
) меньше значения min-height
, то высота элемента принимается равной min-height
.
Блоки
- height
- width
- max-height
- max-width
- min-height
- min-width
Синтаксис¶
/* <length> value */
min-height: 3.5em;
/* <percentage> value */
min-height: 10%;
/* Keyword values */
min-height: max-content;
min-height: min-content;
min-height: fit-content;
min-height: fill-available;
/* Global values */
min-height: inherit;
min-height: initial;
min-height: unset;
Значения¶
В качестве значений принимаются пиксели (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.
auto
- Минимальная высота для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем
0
для других способов разметки. max-content
- Внутренняя предпочтительная высота.
min-content
- Внутренняя минимальная высота.
fill-available
- Высота родительского блока минус вертикальные
margin
,border
, иpadding
. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого словаavailable
.) fit-content
- Согласно CSS3 Box, это синоним min-content. CSS3 Sizing определяет более сложный алгоритм, но ни один браузер не реализует его даже экспериментальным путем.
Значение по-умолчанию:
min-height: auto;
Применяется ко всем элементам, кроме строчных и таблиц
Спецификации¶
- CSS Intrinsic & Extrinsic Sizing Module Level 3
- CSS Flexible Box Layout Module
- CSS Transitions
- CSS Level 2 (Revision 1)
Поддержка браузерами¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>min-height</title>
<style>
footer {
background: #66806e url(/example/image/clover.png)
no-repeat 20px bottom; /* Параметры фона */
min-height: 80px; /* Минимальная высота */
color: #e4bc96; /* Цвет текста */
padding: 5px 5px 5px 140px; /* Поля вокруг текста */
}
footer p {
margin: 5px 0;
}
footer a {
color: #fffde0;
}
</style>
</head>
<body>
<footer>
<p>Сайт Cloverfield</p>
<p>
<a href="page/techinfo.html">Информация о сайте</a>
<a href="page/activity.html">Об авторе</a>
</p>
</footer>
</body>
</html>