Свойство max-height устанавливает максимальную высоту элемента. Обычно задается для элемента с плавающей шириной (высота задана в процентах или не задана вообще, а элемент по высоте раздвигается своим содержимым). Если задана максимальная высота - то больше этой высоты элемент не сможет стать.

Синтаксис

селектор {
	max-height: CSS единицы | проценты | none | inherit;
}

Значения

Значение Описание
CSS единицы Устанавливает максимальную высоту в заданных единицах.
Проценты Максимальная высота элемента вычисляется в зависимости от ширины родительского элемента.
none Максимальная высота не задана.
inherit Наследует значение родителя.

Значение по умолчанию: none.

Примеры

Пример

В данном примере высота составляет процент от высота родителя - в нашем случае это body. Увеличьте окно браузера по высоте, и контейнер тоже увеличится, чтобы подстроиться под высоту окна браузера. Однако он будет увеличиваться только до величины, определенной в max-height - это 300px. Как только контейнер достигнет этой ширины - он перестанет увеличиваться:

#elem {
	height: 80%;
	max-height: 300px;
	width: 700px;
	border: 1px solid black;
}

Посмотреть пример.