CSS свойство max-height

CSS свойства

Определение и применение

CSS свойство max-height устанавливает максимальную высоту элемента. Свойство применяется к блочным элементам.

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
max-height1.01.07.02.0.27.012.0

CSS синтаксис:

max-height:"none | length | initial | inherit";

JavaScript синтаксис:

object.style.maxHeight = "100px"

Значения свойства

ЗначениеОписание
noneМаксимальная высота не предусмотрена. Это значение по умолчанию
lengthОпределяет максимальную высоту (в единицах измерения CSS).
%Определяет максимальную высоту (в процентах). Высота высчитывается в зависимости от высоты родительского элемента.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Максимальная высота элемента.</title>
<style> 
.test {
max-height  : 100px; /* задаём максимально высоту для блока */
width : 150px; /* устанавливаем ширину для блока */
border : 1px solid; /* устанавливаем сплошную границу размером 1px */
overflow : auto; /* устанавливаем, что при переполнении блока, скроллбар  добавляется к элементу */
}
</style>
</head>
	<body>
		<div class = "test">
			Съешь же ещё этих мягких французских булок да выпей чаю.Съешь же ещё этих мягких французских булок да выпей чаю.
		</div>
	</body>
</html>
Пример установки максимальной высоты для элемента.
Пример установки максимальной высоты для элемента.
CSS свойства