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 | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
| 1.0+ | 12.0+ | 3.0+ | 1.0+ | 4.0+ |
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
min-height #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. Отрицательные значения не допускаются.
Минимальная высота для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.
Внутренняя предпочтительная высота.
Внутренняя минимальная высота.
Высота родительского блока минус вертикальные margin , border , и padding . (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова available .)
Согласно 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)
Поддержка браузерами¶
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 32 33 34
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> min-height
CSS свойство min-height устанавливает минимальную высоту области для содержимого элемента.
Примите во внимание, что минимальная высота элемента вычисляется по формуле:
min-height+padding(верхний и нижний)+border(ширина рамки)
т.е. если вы зададите min-height: 500px, padding: 5px, border 1px, то минимальная высота получится 512px.
Примечание: CSS свойство min-height работает только с блочными элементами.
| Значение по умолчанию: | 0 |
|---|---|
| Применяется: | ко всем элементам, кроме незаменяемых строчных элементов, столбцов таблицы и групп столбцов |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS2 |
| Синтаксис JavaScript: | object.style.minHeight=»10px» |
Синтаксис
min-height: %|величина|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| величина | Определяет минимальную высоту в единицах измерения CSS. |
| % | Минимальная высота указывается в процентах и высчитывается в зависимости от высоты родительского элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
Пример pМинимальная высота элемента 100px.
Результат данного примера в окне браузера:
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru