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¶
Свойство 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> Min-height у td
height внутри min-height
структура такова <div # min-height 100% <div height 60% width 30%.
Аналог min-width, min-height в CSS < 3
Ребят. Собственно, нужно как-то сделать страницу с этими параметрами (т.е. не обязательно с ними) .
Действительно, min-height не работает для тегов td.
Но вместо него обычно пишут просто height. В данном случае работает так же, как и min-height (если контент превышает указанную высоту, то высота столбца увеличивается).
Блок на растягивается на height:100%; min-height: 100%;
Подскажите пожалуйста, почему мне не получается растянуть блок во всю высоту браузера? Вроде бы.
min-height не работает
у одного блока есть свойство min-height:700px; при наполнении содержимого больше чем 700 пикселей.
не срабатывает min-height
Здравствуйте. Есть блок, оборачивающий страницу. У него свойство height: 100%; min-height: 600px;.
Min-height: 100%
Для чего ставится min-height: 100% для html и body? Имеется код, написанный преподавателем по.
DOCTYPE с min-height
Но ведь мой браузер понимает что я пишу даже без этого. Не указав этот тег я написал весь свой.
Почему не действует свойство min-height
http://www.wnero.esy.es/catalog/ На данной странице весь контент лежит внутри блока с классом.