Кроссбраузерная минимальная высота(min-height)
Описание проблеммы:
В связи с бурным развитием интернета и html в частности, у дизайнеров появляется возможность рисовать более сложные для верстки сайты. Часто в дизайне сайта появляются такие элементы, при верстке которых нужно использовать минимальную высоту, так чтоб при отсуствии контента блок сохранял свою высоту, а если количество контента больше указанной высоты, чтоб блок растягивался по высоте. Но хоть в стандартных тегах html и есть тег min-height, но к сожелению разработчики IE решили, что этот тег не будет работать в самом популярном, на сегодняшний день, браузере. И это накладывает определенные ограничения на создание дизайна, так как при верстке не возможно установить минимальную высоту блока, чтоб она работала во всех браузерах.
Но, к счастью, есть способ всетаки заставить IE воспринимать минимальную ширину. Синтаксис:
p {
min-height:значение;
height:auto !important;
height:значение;
}
Описание:
Примечание: последовательность кода должна быть такой же как в синтаксисе, иначе метод не будет работать. Расмотрим пошагово создание css кода для кроссбраузерной высоты:
min-height - стандартный html тег для указания минимальной высоты (к сожелению не работает в IE)
height:auto !important; - эта запись позволяет установить высоту блока, но при этом она не будет восприниматся браузером FireFox, это делается потому, что если количество контента в блоке больше чем указана высота, то текст вылазит за пределы блока, а сам блок не растагивается.
height - устанавливает высоту блока, а из-за применения !important в предидущем пункте - высота воспринимается только браузером IE.
Листинг style.css:
.block{min-height:30px; height:auto !important; height:30px; width:200px; border:1px solid #FF0000;}
Листинг index.html: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=
"http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=
"Content-Type" content="text/html; charset=windows-1251" />
<title>
Кроссбраузерная минимальная ширина (min-height)</title>
</head>
<body>
<div class=
"block">
Error sit voluptatem assusantium doloremque
laudantium, totam rem aperiam eaque ipsa quae
ab illo inventore </div>
</body>
</html>
Результат: Error sit voluptatem assusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore
*чтоб убедится в кроссбраузерности этого метода откройте эту страницу в разных браузерах.
Добавить комментарий
Комментарии
RSS лента комментариев этой записи.