Как прижать подвал к низу страницы?

Как прижать подвал к низу страницы?

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


Для начала создадим необходимую html разметку:

<div class="page">
    <div class="header">
        Верх страницы
    </div>
    <div class="center">
        Основное содержимое страницы
    </div>
    <div class="end_page"></div>
</div>
<div class="footer">
    Подвал
</div>

Здесь все достаточно тривиально: верх страницы, середина и подвал. Интерес для нас представляет 2 момента: 1. присутствует элемент <div class="end-page></div>, 2. Подвал страницы вынесен за пределы элемента <div class="page"></div>. Разберем их по порядку.

Элемент <div class="end-page></div> - служит своего рода "подушкой безопасности", нужен чтобы подвал не наезжал на основное содержимое страницы, если контента много и оно не влазит в 1 область просмотра. По css ниже будет понятно.

А подвал специально вынесен за пределы основного родительского элемента, чтобы его можно было расположить снизу.

Итак, теперь ознакомимся со стилями:

html, body {
    min-height:100%;
    height:100%;
    width:100%;
    margin:0;
}
.page {
    min-height:100%;
}
.end_page {
    height:60px;
    background:#ededed;
}
.footer {
    height:50px;
    margin-top:-50px;
    background-color:green;
}

Для наглядности некоторые элементы я окрасил. Тут ничего сложного нет, этот незамысловатый код и помогает расположить подвал в самом низу страницы. Помните, что высота элемента <div class="end-page></div> обязательно должна быть либо равна подвалу страницы, либо превышать его.

Напоследок, полный код страницы:

<!DOCTYPE html>
<html>
<head>
<title>Как прижать подвал к низу страницы?</title>
<style>
html, body {
    min-height:100%;
    height:100%;
    width:100%;
    margin:0;
}
.page {
    min-height:100%;
}
.end_page {
    height:60px;
    background:#ededed;
}
.footer {
    height:50px;
    margin-top:-50px;
    background-color:green;
}
</style>
</head>
<body>
<div class="page">
    <div class="header">
        Верх страницы
    </div>
    <div class="center">
        Основное содержимое страницы
    </div>
    <div class="end_page"></div>
</div>
<div class="footer">
    Подвал
</div>
</body>
</html>
 

27.03.17
Для просмотра сайта обновите браузер.