Главная > 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 Вернуться назад |