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

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

Содержание

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

Атрибут min-height | Свойство minHeight

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

Синтаксис

HTML	{ min-height : sMinHeight }
Скрипты	[ sMinHeight = ] object.style.minHeight[ =v ]

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

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

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

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

Замечания

В Internet Explorer 6.0 это свойство применяется для элементов td, th и tr в таблицах с фиксированным размещением. Для этого необходимо свойству tableLayout задать значение fixed. Кстати, при этом скорость отображения таблицы возрастет.

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

Примеры

Первый пример иллюстрирует преимущество использования атрибута min-height вместо HEIGHT для элементов tr.

<html>

<head>
<title>min-height Attribute Example</title>
</head>

<body>

<table border="1" style="table-layout: fixed; width: 100%;">

    <tr>
        <td style="height: 35px; background-color: #99CCFF">Атрибуту <b>
        height</b> данной ячейки задано значение 35px. В Internet Explorer текст обрезается
        если <b>height</b> задан для ячеек или строк в таблице с фиксированным размещением.  
        Задание атрибута <b>min-height</b>, однако, позволяет вместить текст в ячейку 
        путем увеличения высоты ячейки или строки.</td>
    </tr>

    <tr>
        <td style="min-height: 35px; background-color: #99CCFF">Атрибуту <b>
        min-height</b> данной ячейки задано значение 35px. В Internet Explorer текст обрезается
        если <b>height</b> задан для ячеек или строк в таблице с фиксированным размещением.  
        Задание атрибута <b>min-height</b>, однако, позволяет вместить текст в ячейку 
        путем увеличения высоты ячейки или строки.</td>
    </tr>
</table>

</body>

</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>

<head>
<style type="text/css">
.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>