Свойство min-height устанавливает минимальную высоту элемента. Оно не допускает, чтобы значение свойства height стало меньше, чем значение, указанное для min-height.
Min-height отменяет использование свойств height и max-height.
Свойство устанавливается в единицах измерения длины CSS (px, pt, em и т. д.) или в процентах.
Отрицательные значения недопустимы.
Значение по умолчанию | none |
Применяется | Ко всем элементам, кроме незаменяемых строчных элементов, колонок таблицы, групп колонок. |
Наследуется | Нет |
Анимируемое | Да. Высота анимируема. |
Версия | CSS2 |
DOM синтаксис | object.style.minHeight = "100px"; |
Синтаксис
min-height: length | initial | inherit;
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div {
min-height: 50px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Пример свойства min-height</h2>
<div>Минимальная высота текстовой области равна 50px.</div>
</body>
</html>
В следующем примере минимальная высота элемента равна "3cm":
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p {
background-color: #ccc;
}
p.example {
min-height: 3cm;
}
</style>
</head>
<body>
<h2>Пример свойства min-height</h2>
<h3>Min-height: none.</h3>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. </p>
<h3>Min-height: 3cm.</h3>
<p class="example">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
</body>
</html>
Значения
Значение | Описание |
---|---|
auto | Устанавливает минимальную высоту. Значение по умолчанию. |
length | Устанавливает минимальную высоту в единицах измерения (px, pt, cm и т.д.). Значение по умолчанию - 0. |
% | Устанавливает минимальную высоту в процентах. |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
1.0+ | 12.0+ | 3.0+ | 1.0+ | 4.0+ |
Практикуйте свои знания
Что такое CSS свойство 'min-height'?
Правильный!
Неправильно!