HTML 5 макет страницы с фиксированной шириной

Tags: html5, css, макет страницы

Один из типичных макетов страницы – страница с фиксированной шириной. Как правило, в таком макете должны присутствовать заголовок, область контента и подвал. Высота всего макета, в случае когда контента не хватает, должна равняться высоте окна браузера. Я решил накидать подобный макет для последующего использования. Макет проверен в пяти наиболее распространённых на текущий момент браузерах: Opera, Internet Explorer, Fire Fox, Chrome и Safari.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML 5 макет страницы с фиксированной шириной</title>
        <style type="text/css">
            html, body {
                height: 100%;
                margin: 0px;
                min-height: 100%;
                padding: 0px;
            }

            html { background: blue; }

            body { background: violet; }

            p { margin: 0; }

            #layout-wrapper {
                background-color: orangered;
                height: auto !important;
                height: 100%;
                margin: auto;
                min-height: 100%;
                width: 1024px;
            }

            #site-header 
            {
                background: yellow;
                height: 100px;
            }

            #footer-cleaner {
                clear: both;
                height: 25px;
            }

            #site-footer {
                background: greenyellow;
                bottom: 0;
                height: 25px;
                line-height: 25px;
                margin: -25px auto auto auto;
                width: 1024px;
            }

            .copyright {
                float: left;
            }

            .site-developer {
                float: right;
            }
        </style>
    </head>
    <body>
        <div id="layout-wrapper">
            <header id="site-header">
                <p>HTML 5 макет страницы с фиксированной шириной</p>
            </header>
            <article id="site-content">
                <!-- Site content START -->
                <p>Данный отвечает следующим требованиям:</p>
                <ul>
                    <li>Макет занимает всю высоту окна браузера, если контента меньше, чем необходимо, чтобы занять всю высоту окна. При этом вертикальная полоса прокрутки не появляется.</li>
                    <li>Содержимое подвала сайта центрируется по вертикали.</li>
                    <li>Шаблон с фиксированной шириной. Ширина заголовка и подвала равна ширине области контента.</li>
                </ul>
                <!-- Site content FINISH -->
                <div id="footer-cleaner">
                </div>
            </article>
        </div>
        <footer id="site-footer">
            <div class="copyright">&copy; 2012 Компания-заказчик</div>
            <div class="site-developer">Разработка сайта: <a href="http://yourcompany.ru/" target="_blank">Компания-разработчик</a></div>
        </footer>
    </body>
</html>

 

Для того, чтобы макет всегда занимал всю высоту окна браузера, используется принудительное назначение высоты и минимальной высоты элементов html и body, а также блока layout-wrapper в 100%.

Если вам необходим “резиновый” макет, необходимо удалить назначение ширины у блока layout-wrapper и site-footer.

Блок footer-cleaner используется для резервирования места для подвала. Данная техника предполагает назначение одинаковых значений для высоты подвала, высоты блока footer-cleaner и верхнего отступа для подвала (но с отрицательным знаком). В данном шаблоне используется значение 25px.

Вертикальное центрирование содержимого подвала достигается с помощью установки свойства line-height в значение высоты самого подвала.