Свойство CSS min-height
устанавливает минимальную высоту элемента. Оно предотвращает используемое значение свойства height
от становления меньше, чем значение, указанное для min-height
.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулл-реквест.
Высота элемента принимает значение min-height
всякий раз, когда min-height
больше чем max-height
или height
.
Синтаксис
/* <length> значения */ min-height: 3.5em; /* <percentage> значения */ min-height: 10%; /* Значения-ключевые слова */ min-height: max-content; min-height: min-content; min-height: fit-content; min-height: fill-available; /* Глобальные значения */ min-height: inherit; min-height: initial; min-height: unset;
Значения
<length>
- Минимальная высота выражается как
<length>
. Отрицательные значения делают свойство недействительным. <percentage>
- Минимальная высота выражается как
<percentage>
от высоты родительского блока. Отрицательные значения делают свойство недействительным.
Значения-ключевые слова
auto
- Минимальная высота для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.
max-content
- Внутренняя предпочтительная высота.
min-content
- Внутренняя минимальная высота.
fill-available
- Высота родительского блока минус вертикальные
margin
,border
, иpadding
. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова.,available
.) fit-content
- Согласно CSS3 Box, это синоним
min-content
. CSS3 Sizing определяет более сложный алгоритм, но ни один браузер не реализует его даже экспериментальным путем.
Формальный синтаксис
<length> | <percentage> | auto | max-content | min-content | fit-content | fill-available
Примеры
table { min-height: 75%; } form { min-height: 0; }
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Intrinsic & Extrinsic Sizing Module Level 3 Определение 'min-height' в этой спецификации. |
Рабочий черновик | Добавляет ключевые слова max-content , min-content , fit-content , и fill-available . (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией) |
CSS Flexible Box Layout Module Определение 'min-height' в этой спецификации. |
Кандидат в рекомендации | Добавляет ключевое слово auto и использует его как первоначальное значение. |
CSS Transitions Определение 'min-height' в этой спецификации. |
Рабочий черновик | Определяет min-height как анимируемое. |
CSS Level 2 (Revision 1) Определение 'min-height' в этой спецификации. |
Рекомендация | Первоначальное определение. |
Начальное значение | auto |
---|---|
Применяется к | все элементы, кроме незаменяемых строчных элементов, табличных колонок и групп колонок |
Наследуется | нет |
Проценты | Процент для генерируемого блока рассчитывается по отношению к высоте содержащего блока. Если высота содержащего блока не задана явно (т.е. зависит от высоты содержимого), и этот этот элемент позиционирован не абсолютно, процентное значение интерпретируется как 0 . |
Отображение | визуальный |
Обработка значения | процент, как указан, или аблосютная длина |
Animation type | длина, проценты или calc(); |
Канонический порядок | уникальный неоднозначный порядок, определённый формальной грамматикой |
Поддержка браузерами
Компьютеры | Мобильные | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Базовая поддержка | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox
Полная поддержка
3
| IE
Полная поддержка
7
| Opera
Полная поддержка
4
| Safari Полная поддержка 1 | WebView Android ? | Chrome Android ? | Edge Mobile Полная поддержка Да | Firefox Android ? | Opera Android ? | Safari iOS Полная поддержка 9 | Samsung Internet Android ? |
fit-content , max-content , and min-content | Chrome Нет поддержки Нет | Edge Нет поддержки Нет | Firefox Нет поддержки Нет | IE Нет поддержки Нет | Opera Нет поддержки Нет | Safari Полная поддержка 9 | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android Нет поддержки Нет |
stretch | Chrome
Полная поддержка
28
| Edge Нет поддержки Нет | Firefox Нет поддержки Нет | IE Нет поддержки Нет | Opera
Полная поддержка
Да
| Safari
Полная поддержка
9
| WebView Android
Полная поддержка
37
| Chrome Android
Полная поддержка
28
| Edge Mobile ? | Firefox Android ? | Opera Android
Полная поддержка
Да
| Safari iOS ? | Samsung Internet Android
Полная поддержка
Да
|
auto | Chrome Полная поддержка 21 | Edge ? | Firefox
Нет поддержки
16 — 22
| IE Нет поддержки Нет | Opera Полная поддержка 12.1 | Safari Нет поддержки Нет | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
- Совместимость неизвестна
- Совместимость неизвестна
- Экспериментальная. Ожидаемое поведение может измениться в будущем.
- Экспериментальная. Ожидаемое поведение может измениться в будущем.
- Смотрите замечания реализации.
- Смотрите замечания реализации.
- Использует нестандартное имя.
- Использует нестандартное имя.