Блог > Html/Css верстка > Минимальная высота(min-height) {

Минимальная высота(min-height)}

Решение 1

Представим, перед html кодером стоит задача сверстать макет,так,чтобы при отсутствии контента блок сохранял свою высоту,а если количество контента больше указанной высоты, чтоб блок растягивался по высоте.

Этот способ реализуем с помощью css свойства min-height. Но существует небольшая проблема. Данное свойство не поддерживает всеми нами любимый IE6.

Ниже я приведу решение(если хотите хак), с помощью которого данная задача становится решаемой.

css

p { min-height:100%;
height:auto !important;
height:100%;
}

min-height - css свойство для указания минимальной высоты (к сожелению не работает в IE)
height:auto !important- эта запись позволяет установить высоту блока, но при этом она не будет восприниматся браузером FireFox, это делается потому, что если количество контента в блоке больше чем указана высота, то текст вылазит за пределы блока, а сам блок не растагивается.
height- устанавливает высоту блока, а из-за применения !important в предыдущем пункте - высота воспринимается только браузером IE.

Решение 2

Так же можно эмулировать минимальную высоту с помощью комбинации:

css

.block{
padding-top:200px;
}
.block .inner{
margin-top:-200px;
}

Решение 3

min-height с помощью expression

css

.block {
height: expression(this.scrollHeight < 201px ? "200px" : "auto" );
min-height: 200px;
}

предыдущая следующая

Комментарии:

Алексей	23 10 10
У меня в IE можно просто поставить height: 100% и он будет растягивать по высоте контента/окна, а вот в SeaMonkey, как я ни бился, ничего не получается...

admin	16 09 10
Хотим выразить Олегу Громову искреннюю благодарность за помощь в обнаружении нелепости. Спасибо)))

�� : September 16, 2010, 09:08:03 by admin