5W site logo 5W - мой домашний сайт-блог с картинками, кино и плюшками.

css-footer-vniz.txt

Для начала создадим типичную структуру самого простого сайта:
<div class="page">
<div class="header">
<!-- Содержимое шапки -->
</div>
<div class="content">
<!-- Содержимое области контента -->
</div>
<div class="footer">
<!-- Содержимое футера -->
</div>
</div>

Классическая структура:

page — весь документ я объединил в один блок, на деле можете использовать любой другой, если это может нарушать какие-либо правило или структуру документа;
header — шапка сайта, в которой часто содержится меню, логотип и прочее;
content — область контента (информация, которая содержится на странице);
footer — наш подвал сайта, в котором часто содержится копирайт, логотип, контакты, меню.

После того, как документ готов — можно переходить, непосредственно, к заданию правил для наших элементов с помощью CSS3:

html,
body {
height: 100%;
}

.page {
min-height: 100%;
position: relative;
}

/* Правила для шапки */
.header {
background: #AB1857;
height: 70px;
}

/* Правила для контента */
.content {
padding-top: 30px;
padding-bottom: 50px;
}

/* Правила для подвала сайта */
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 120px; /* Высота блока footer */
background: rgba(14,14,14,0.95);
}

Таким образом, мы получаем универсальное правило для того чтобы прижать footer к низу страницы, при любых случаях. Как видно из примера, для его создания не требуется большое количество правил и не составляет большого труда. Давайте выделим ключевые моменты в правилах, которые необходимо применить вам:

height: 100% для html, body. С помощью этого мы даём указания браузеру, что страница должна располагаться на всю высоту;
padding-bottom для контента. Таким образом мы задаём отступ от футера;
position: absolute. С помощью него мы задаем абсолютную позицию футеру, не зависящую от других блоков;
bottom: 0. Обнуляем отступ снизу;
width: 100%. Задаём ширину футера по всей ширине страницы;
height: 120px. Задаём высотку блока подвала;
Наверх