max-height

Браузер	Internet Explorer			Netscape		Opera			Safari		Mozilla	Firefox
Версия	5.5	6.0	7.0	7.0	8.0	7.0	8.0	9.0	2.0	3.0	1.7	1.0	2.0	3.0
Поддерживается	Нет	Нет	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

Краткая информация

CSS	CSS2
Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам, кроме встроенных и таблиц
Аналог HTML	Нет
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

Описание

Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных свойств.

Табл. 1. Высота элемента
Значения параметров					Ширина
min-width	<	height	<	max-height	height
		height	<	max-height	height
		height	>	max-height	max-height
min-height	>	height	>	max-height	min-height
min-height	>	height	<	max-height	min-height

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

Синтаксис

max-height: значение | none

Аргументы

В качестве значений принимаются пикселы (px) и проценты (%). Значение none убирает все ограничения на высоту.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>max-height</title>
<style type="text/css">
.block {
overflow: auto; /* Полоса прокрутки при необходимости */
padding: 10px; /* Поля вокруг текста */
max-height: 80px; /* Максимальная высота */
background: #ffe; /* Цвет фона */
border: 1px solid #cb2027; /* Параметры рамки */
}
.block p {
margin: 2px auto; /* Отступы в абзаце */
}
</style>
</head>
<body>
<div class="block">
<p>Блокирование элемента не позволяет вообще производить с ним каких-либо действий, в том числе выделять содержимое текстового поля, изменять его или активизировать. Заблокированное поле помечается обычно серым цветом</p>
<p>Некоторые браузеры позволяют выделять и копировать содержимое заблокированного текстового поля, но все остальные действия недоступны.</p>
</div>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Результат использования свойства max-height

Объектная модель

[window.]document.getElementById("elementID").style.maxHeight