Приклеивание футера

1) Делаем блок на весь экран, то есть

div { width:100%; height:100% background:red; } Нужно убрать отступы у body через margin:0 auto; Если все сделано правильно, мы должны увидеть цветной блок во все окно, без скроллинга

Если блок не виден из-за высоты 0 или подстраивается под высоту контента, то смотрите примечание 1

2) Теперь добавим блок футера .footer { width:100%; height:50px; background:yellow; }

Получаем

Сейчас у нас есть скролинг, так как к 100% высоты основного блока добавляется 50px футера

3) Добавим отрицательный margin-top, чтобы футер поднялся вверх на свою высоту. .footer { width:100%; height:50px; background:yellow; margin-top:-50px } Если все сделано правильно наш футер будет «приклеен» к низу при любом разрешении экрана

Есть несколько моментов из-за чего это все может не работать

1. Иногда браузер игнорирует height:100% у блока. Это происходит из-за того, что 100% отсчитывается от высоты родительского блока. Родительским блоком является body, для которого родительским является html. Так вот у html по умолчанию height стоит в значении auto – то есть по высоте контента
2. Если контента больше чем на один экран, это может привести к тому, что футер будет «разрезать» контент на две части. Понятно, что в этой ситуации, нам нужен футер не внизу экрана, а снизу страницы. Было бы неплохо иметь один и тот же шаблон на разное количество контента Чтобы решить эту проблему меняем height:100% на min-height:100% у основного блока.
3. Чтобы футер не закрывал контент в основном блоке, добавим в него прозрачный блок высотой с футер