max-height
Поддержка браузерами
12.0+ | 7.0+ | 1.0+ | 1.0+ | 7.0+ | 2.0.2+ |
Описание
CSS свойство max-height устанавливает максимальную допустимую высоту области для содержимого элемента.
Примите во внимание, что полная высота элемента вычисляется по формуле:
max-height+padding(верхний и нижний)+border(ширина рамки)
т.е. если вы зададите max-height: 500px, padding: 5px, border 1px, то максимальная высота получится 512px.
Примечание: CSS свойство max-height работает только с блочными элементами.
Значение по умолчанию: | none |
---|---|
Применяется: | ко всем элементам, кроме незаменяемых строчных элементов, столбцов таблицы и групп столбцов |
Анимируется: | да |
Наследуется: | нет |
Версия: | CSS2 |
Синтаксис JavaScript: | object.style.maxHeight="10px" |
Синтаксис
max-height: none|величина|%|inherit;
Значения свойства
Значение | Описание |
---|---|
none | Максимальная высота отсутствует. |
величина | Определяет максимальную высоту в единицах измерения CSS. |
% | Максимальная высота указывается в процентах и высчитывается в зависимости от высоты родительского элемента. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Пример</title> <style> p { max-height: 50px; background-color: yellow; } </style> </head> <body> <p>В этот раз в лесу ему было как-то не по себе, ему мерещились странные звуки и казалось что миллионы маленьких блестящих глаз наблюдают за ним из темноты. Такой знакомый с детсва лес казался сейчас огромным живым организмом, в котором человек был не долгожданным гостем, а врагом, которого здесь явно не ждали. Очнувшись от этих мыслей, он понял, что напротив него, в темноте кто-то есть, и едва он успел это осознать, как быстрым стремительным движение, враг накинулся на него.</p> </body> </html>
Результат данного примера в окне браузера: