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

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

Характеристики

Значение по умолчанию: none.
Применяется: ко всем элементам, кроме строчных элементов, колонок и групп колонок таблицы.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.maxHeight="value".

Синтаксис

max-height: <размер> | <проценты> | none

Значения

размер – любые доступные в CSS единицы измерения (смотреть). Отрицательные значения не допускаются.
проценты – максимальная высота элемента вычисляется в процентах относительно высоты родительского элемента либо окна браузера при отсутствии такового. Однако, если высота родительского элемента не будет указана явно, то будет использовано значение none.
none – отменяет действие свойства.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css2/visudet.html#propdef-max-height

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/max-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{max-height: 150px;}
		
		.p_2{max-height: 70px;}

	</style>
	
</head>
<body>
	<p class="p_1">
		height: 100px;<br>
		max-height: 150px;<br>
		Используется height.		
	</p> 
 
	<p class="p_2">
		height: 100px;<br>
		max-height: 70px;<br>
		Используется max-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: 200px;
		max-height: 10%;
		margin: 10px;
		padding: 10px;
		border: 5px solid green;
		}

	</style>
	
</head>
<body>
	<div>
		<p>
			height: 200px;<br>
			max-height: 10%;<br>
			max-height будет установлено в none, т.к. 
			высота родителя не установлена явно.		
		</p>
	</div>	
 </body>
</html>

Пример №2