CSS свойство min-height
Свойство 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;Пример
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»:
Пример
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 | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
min-height
Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height , max-height и min-height . В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.
| Значения свойств | Высота | ||||
|---|---|---|---|---|---|
| min-height | height | max-height | height | ||
| min-height | > | height | > | max-height | min-height |
| min-height | > | height | max-height | min-height | |
| min-height | height | height | |||
| min-height | > | height | min-height | ||
| min-height | > | max-height | min-height | ||
| min-height | max-height | max-height | |||
Данные из таблицы следует понимать следующим образом. Если значение высоты ( height ) меньше значения min-height , то высота элемента принимается равной min-height .
Синтаксис
min-height: значение | проценты | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
#bottom < background: #66806E url(images/clover.png) no-repeat 20px bottom; /* Параметры фона */ min-height: 80px; /* Минимальная высота */ color: #E4BC96; /* Цвет текста */ padding: 5px 5px 5px 140px; /* Поля вокруг текста */ >#bottom p < margin: 5px 0; >#bottom a Сайт Cloverfield Информация о сайте Об авторе
В данном примере, чтобы фоновое изображение не обрезалось по верхнему краю, задана минимальная высота блока равная 80 пикселам. Результат примера показан на рис. 1.
Рис. 1. Высота блока, заданная с помощью min-height
Объектная модель
[window.]document.getElementById(» elementID «).style.minHeightБраузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
min-height¶
Свойство min-height задаёт минимальную высоту элемента.
Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height , max-height и min-height .
Если значение высоты ( height ) меньше значения min-height , то высота элемента принимается равной min-height .
Демо¶
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/* value */ min-height: 3.5em; /* 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 определяет более сложный алгоритм, но ни один браузер не реализует его даже экспериментальным путем.
Применяется ко всем элементам, кроме строчных и таблиц
Спецификации¶
Поддержка браузерами¶
Can I Use minmaxwh? Data on support for the minmaxwh feature across the major browsers from caniuse.com.
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
html> head> meta charset="utf-8" /> title>min-heighttitle> 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>Сайт Cloverfieldp> p> a href="page/techinfo.html">Информация о сайтеa> a href="page/activity.html">Об автореa> p> footer> body> html>