Особенности:
- Standards mode
- Минимальная и максимальная ширина
- При растяжении больше максимальной ширины макет центрируется
- Футер всегда прибит к низу страницы
Тестовая страница
Простой пример использования
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sample layout</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="main-ie6.css"/><![endif]-->
</head>
<body>
<div id="outer">
<div id="header">header</div>
<div id="content">content</div>
</div>
<div id="footer">footer</div>
</body>
</html>
main.css
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
color: #000;
background-color: #fff;
font-family: Arial, sans-serif;
font-size: 0.8em;
line-height: 1.4;
text-align: center;
}
#outer {
min-height: 100%;
}
#outer,
#footer {
min-width: 700px;
max-width: 1400px;
margin: auto; /* center it */
text-align: left;
}
#header {
background-color: #66cc66;
}
#content {
padding-bottom: 3.2em;
}
#footer {
height: 2.6em;
margin-top: -2.6em;
background-color: #ff8080;
}
main-ie6.css
#outer {
height: 100%;
}
#outer,
#footer {
width: expression(document.documentElement.clientWidth < 700 ? '700px' : document.documentElement.clientWidth < 1400 ? '100%' : '1400px');
}
5 комментариев:
Простите, но футер в Опере не "всегда прибит к низу страницы". При ручном изменении высоты браузера, он остается на месте.
Надо будет подробнее посмотреть. У меня тоже есть типовой макет, с которого я начинаю работу по созданию сайта. Он немного отличается.
У меня возник вопрос. А есть разница в том, если использовать в отличие от вашего примера в expression значения document.documentElement.clientWidth и document.body.clientWidth? (Без блока #measurer.) Или Ваш способ лучше в плане производительности?
Андрей, вы правы, давно хотел избавиться от этого measurer. Спасибо, что напомнили. Обновил код в заметке и в примерах.
Если указать body {position:relative; min-height:100%;} а затем #footer {position:absolute;bottom:0;} то футер будет прибиваться к низу в "нормальных" браузерах. Конечно нужно будет забит margin-bottom под футер. Сейчас не могу сказать какие костыли я придумывал для ие6, но помойму тоже работало.
Сейчас не могу сказать какие костыли я придумывал для ие6, но помойму тоже работало.
Для IE6 достаточно дополнительно задать:
html {height:100%}
Отправить комментарий