Как прижать футер к низу страницы

Работая с несколькими десятками сайтов в месяц, начал замечать, что люди либо не хотят, либо просто не умеют сделать свой футер Футером) данная проблема наблюдается у страниц, которые предусмотрены для одного экрана, то есть страницы, которые полностью видны без прокрутки. Когда нижний блок не прижимается к низу экрана смотрится это не очень красиво. Проблему легко решить с помощью правильного применения CSS свойств и прижать футер к низу.

В чем проблема: футер по умолчанию следует за основным контентом и не прижимается к низу страницы.
В итоге мы должны прижать футер к низу страницы, если контента не хватает.
 

Как прижать футер к низу страницы?

HTML
Рассмотрим всё на простой структуре из 3-х блоков:

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

Тут мы имеем один общий блок, в котором находятся три видимых блока.

CSS
Здесь также всё довольно просто:

html,
body {
  height:100%;
}
 
#container {
   min-height:100%;
   position:relative;
}
 
/*Стили для блока с шапкой*/
#header {
   background:#222;
   padding:10px;
}
 
/*Стили для центральной части*/
#body {
   padding-bottom:70px;   /* Высота блока "footer" */
}
 
/*Стили для нижней части*/
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:70px;   /* Высота блока "footer" */
   background:#66ccff;
}

Отметим строки с комментариями. 
padding-bottom:70px - это внутренний отступ снизу у центральной части и это же число у высоты нижней части (футера) - height:70px. В этом и есть весь секрет. То есть отсупаем от центральной части ровно на высоту самого футера.

Вывод
Метод не сложный и понять его очень легко. На самом деле для сайтов, которые рассчитаны для одного экрана, это самый простой способ решить проблему и прижать футер к низу на чистом CSS.