- CSS min-height Property
- Definition and Usage
- Browser Support
- CSS Syntax
- Property Values
- min-height
- Синтаксис
- Значения
- Объектная модель
- Браузеры
- CSS свойство min-height
- Синтаксис
- Пример
- Пример
- Значения
- Поддержка браузера
- min-height
- Синтаксис
- Значения
- Объектная модель
- Браузеры
- min-height¶
- Демо¶
- Синтаксис¶
- Значения¶
- Спецификации¶
- Поддержка браузерами¶
- Описание и примеры¶
CSS min-height Property
Set the minimum height of a
element to 200 pixels:
Definition and Usage
The min-height property defines the minimum height of an element.
If the content is smaller than the minimum height, the minimum height will be applied.
If the content is larger than the minimum height, the min-height property has no effect.
Note: This prevents the value of the height property from becoming smaller than min-height .
| Default value: | 0 |
|---|---|
| Inherited: | no |
| Animatable: | yes, see individual properties. Read about animatable Try it |
| Version: | CSS2 |
| JavaScript syntax: | object.style.minHeight=»400px» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
CSS Syntax
Property Values
| Value | Description | Demo |
|---|---|---|
| length | Default value is 0. Defines the minimum height in px, cm, etc. Read about length units | Demo ❯ |
| % | Defines the minimum height in percent of the containing block | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about 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 .
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>