Как прижать footer сайта к низу страницы

Иногда на небольших сайтах, где вся информация на странице помещается в один экран есть необходимость прижимать footer сайта к низу экрана. В противном случае footer будет идти сразу после контентной части, а между концом блока футера и нижней частью экрана останется «просвет». Проблему можно решить при помощи css стилей.

Как прижать блок сайта к низу экрана

Давайте рассмотрим простой пример, состоящий из 3-х основных блоков, шапки сайта, контентной части и футера.

<div class="container">
    <div class="header">
        <!-- Содержимое шапки -->
    </div>
    <div class="content">
        <!-- Содержимое контентной/центральной части -->
    </div>
    <div class="footer">
        <!-- Содержимое нижнего блока -->
    </div>
</div>

В примере у нас есть родительский общий блок container и три вложенных блока шапки, контента и футера. Рассмотрим CSS.

html,
body {
    height:100%;
}

.container {
    min-height:100%;
    position:relative;
    text-align: center;
    max-width: 60%;
    margin: 0 auto;
}

/*Шапка сайта*/
.header {
    background:#EEE;
    padding:10px;
}

/*Контентная часть*/
.content {
    padding-bottom:70px; /*Отступаем от низа экрана на высоту блока footer*/
}

/*Стили для нижней части*/
.footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:70px;
    background:#CCC;
}

Результат можно посмотреть в демо примере. 

Демо

Надеюсь вам поможет рассмотренный пример. Желаю удачи!