Установка минимальной высоты блока в Internet Explorer 6
В версии CSS 2 появилось свойство min-height, позволяющее задать минимальную высоту для блока на странице. Высота блока всегда будет НЕ меньше указанной, а при переполнении контентом блок будет расширяться. Min-height довольно часто используется при вёрстке. И всё бы хорошо, но Internet Explorer 6 не поддерживает min-height(в остальных браузерах IE >= 7, FF, Opera, Safari, Chrome всё работает). Но есть способ обойти эту проблему.
Кроссбраузерный min-height IE >= 6 и другие…
Описываем стиль
1 2 3 4 5 |
.block { min-height: 500px; height: auto !important; height: 500px; } |
и применяем его к нужному блоку.
Опишем, что тут происходит.
Браузеры, поддерживающие свойство min-height, а это Internet Explorer >= 7, FF >= 2, Opera >= 9.2, Safari >= 2, Chrome(все версии), установят указанную минимальную высоту и высота эта будет увеличиваться при переполнении контентом.
Браузер IE 6 не поймёт и проигнорирует свойство min-height. Так же он проигнорирует height: auto !important несмотря на !important(такое вот странное поведение). Вместо этого он возьмёт следующее CSS свойство height: 500px; и установит высоту блока в 500px. При этом у IE есть особенность, даже при фиксированной высоте (или ширине) при переполнении контентом блок расширяется. Другие же браузеры при фиксированной высоте(ширине) при переполнении не расширяют блок. Вот и получается, что установка высоты для блока в IE 6 сродни min-height в остальных браузерах.