max-height

Браузер	Internet Explorer				Chrome				Opera			Safari				Firefox
Версия	6.0	7.0	8.0	9.0	2.0	3.0	4.0	5.0	9.2	9.6	10	2.0	3.1	4.0	5.0	2.0	3.0	3.6	4.0
Поддержка

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

CSS	CSS2+
Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам, кроме встроенных и таблиц
Ссылка на спецификацию	открыть в новой вкладке

Описание

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

Значения свойств					Ширина
min-height	<	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

Табл. 1. Высота элемента

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

Синтаксис

max-height: значение | проценты | none | inherit

Аргументы

В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.

none - Отменяет действие этого свойства.

inherit - Наследует значение родителя.

Пример

<!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>

Демонстрация примера

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

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

Примечание

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

max-height

Категории

Последние комментарии

	Русский
	English