Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Позиционирование : max-height

Материал из Справочник Web-языков

Содержание

1 Атрибут max-height | Свойство maxHeight
2 Синтаксис
3 Используемые значения
4 Замечания
5 Примеры
6 Стандарты
7 Поддерживаемые браузеры
8 Ссылки на источники

Атрибут max-height | Свойство maxHeight

Задает максимальную высоту объекта.

Синтаксис

HTML	{ max-height : sMaxHeight }
Скрипты	[ sMaxHeight = ] object.style.maxHeight[ =v ]

Используемые значения

sMaxHeight: Строка, которая может определять и принимать от одно из следующих значений:

length: Задается вещественным числом, выраженным в абсолютных (cm, mm, in, pt или pc) или относительных (em, ex или px) единицах измерения.
percentage: Числовое значение, выраженное в процентах (%). Задает какой процент от высоты контекстного блока будет являться размером объекта. Если высота контекстного блока точно не задана, то у элемента нет максимальной высоты, и свойство maxHeight интерпретируется как 0%.

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию нет. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

Свойство maxHeight появилось в Internet Explorer 7.0.

Атрибуты min-height/max-height применяются к блочным элементам с относительным и абсолютным позиционированием в виде как бы встроенных внутренних ограничений. Эти атрибуты не применяются к неперемещаемым встроенным элементам, таким как столбцы таблицы или группы строк/столбцов.

Примеры

В примере показано как используются атрибуты min-height/max-height для задания размеров объекта.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<style>
.height {
    float:left;
    width:300px;
    background:#fff;
    margin:0 1em;
}
#example1 { min-height:200px; }
#example2 { max-height:100px; }
.content {
    border:1px solid #c00;
    padding:5px;
}
</style>
</head>
<body>
<div class="height" id="example1">
<div class="content">
    <h2>{ min-height:200px }</h2>
    <p>Высота этого блока div всегда хотя бы 200px.<br/><br/>
       Контент не заполняет блок div полностью.</p>
</div>
</div>

<div class="height" id="example2">
<div class="content">
    <h2>{ max-height:100px }</h2>
    <p>Высота блока div не более 100 px.<br/><br/>
       Контент, не умещающийся в блок div, располагается после него</p>
</div>
</div>
</body>
</html>