Главная > css > Как заставить min-height работать

Как заставить min-height работать


15 октября 2009. Разместил: dimon
Реализация min-height в разных браузерах отличается и в результате где-то работает, а где-то и не работает.

Проверим код в доступных браузерах:

<div style="background:White; border: solid 1px black; min-height: 50px;">Text</div>


Text


IE 6 -
IE 8 +
Opera 10 +
Firefox 3 +

Разработчики IE 5-6 реализовали свойство min-height, просто решили его назвать height. т.е. height для 5-ой и 6-ой версий ведет себя именно как min-height.

Рассмотрим способы реализации min-height, работающие во всех браузерах (в старых версиях).

Вариант 1

<div style="background:White; border: solid 1px black; min-height: 50px; height:auto !important; height: 50px;">Text1</div>


Text1


IE 6 +
IE 8 +
Opera 10 +
Firefox 3 +

Вариант 2

С помощью javascript:

<div style="background:White; border: solid 1px black; height: expression(this.scrollHeight < 51px ? '50px' : 'auto' ); min-height: 50px;">Text2</div>


Text2


IE 6 -
IE 8 +
Opera 10 +
Firefox 3 +

Недостатками данного метода является снижение скорости отображения страницы, а так же необходимость поддержки JS браузером. Хотя браузеров без поддержки ява-скриптов уже почти и не осталось, но иногда ява бывает отключена с точки зрения повышения безопасности.

PS: Возможно, что на этой станичке Вы увидите, что первый и третий блок высотой не 50px - это накладывается DLE feel

Вернуться назад