01.11.2008

Типовой лейаут страницы

Особенности:

  • 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 комментариев:

Unknown комментирует...

Простите, но футер в Опере не "всегда прибит к низу страницы". При ручном изменении высоты браузера, он остается на месте.

Unknown комментирует...

Надо будет подробнее посмотреть. У меня тоже есть типовой макет, с которого я начинаю работу по созданию сайта. Он немного отличается.

У меня возник вопрос. А есть разница в том, если использовать в отличие от вашего примера в expression значения document.documentElement.clientWidth и document.body.clientWidth? (Без блока #measurer.) Или Ваш способ лучше в плане производительности?

Степан Резников комментирует...

Андрей, вы правы, давно хотел избавиться от этого measurer. Спасибо, что напомнили. Обновил код в заметке и в примерах.

Алекс комментирует...

Если указать body {position:relative; min-height:100%;} а затем #footer {position:absolute;bottom:0;} то футер будет прибиваться к низу в "нормальных" браузерах. Конечно нужно будет забит margin-bottom под футер. Сейчас не могу сказать какие костыли я придумывал для ие6, но помойму тоже работало.

Unknown комментирует...

Сейчас не могу сказать какие костыли я придумывал для ие6, но помойму тоже работало.

Для IE6 достаточно дополнительно задать:

html {height:100%}