html.okpython.net
Основы создания сайтов
CSS :: Свойство min-height
css-свойство min-height (от англ. minimum height – наименьшая высота) по умолчанию устанавливает минимально допустимое значение высоты области содержимого элемента. В обычной ситуации, когда значение свойства height превышает наименьший предел, используется значение height. Если же значение высоты станет меньше минимально допустимого значения, будет использовано значение свойства min-height (свойство height при этом будет игнорироваться).
Характеристики
- Значение по умолчанию: 0.
- Применяется: ко всем элементам, кроме строчных элементов, колонок и групп колонок таблицы.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.minHeight="value".
Синтаксис
min-height: <размер> | <проценты>
Значения
- размер – любые доступные в CSS единицы измерения (смотреть). Отрицательные значения не допускаются.
- проценты – минимальная высота элемента вычисляется в процентах относительно высоты родительского элемента либо окна браузера при отсутствии такового. Однако, если высота родительского элемента не будет указана явно, то будет использовано значение 0.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css2/visudet.html#propdef-min-height
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/min-height
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 300px; height: 100px; margin: 10px; padding: 10px; border: 10px solid green; } .p_1{min-height: 150px;} .p_2{min-height: 70px;} </style> </head> <body> <p class="p_1"> height: 100px;<br> min-height: 150px;<br> Используется min-height. </p> <p class="p_2"> height: 100px;<br> min-height: 70px;<br> Используется height. </p> </body> </html>
Пример №1
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №2</title> <style> div{ width: 400px; margin: 10px; padding: 10px; border: 10px solid blue; } p{ width: 50%; height: 100px; min-height: 90%; margin: 10px; padding: 10px; border: 5px solid green; } </style> </head> <body> <div> <p> height: 100px;<br> min-height: 90%;<br> min-height будет установлено в 0, т.к. высота родителя не установлена явно. </p> </div> </body> </html>
Пример №2