Как прижать футер кроссбраузерно к низу страницы (руководство к действию)

Раньше эта статья находилась по адресу ниже, но в ноябре 2016 года этот сайт сдох по неизвестной причине… Но к счастью Хомс сохранил этот текст)
http://webdevelopernotes.ru/2010/09/26/kak-prizhat-footer-k-nizu-stranitsy/
26 сентября 2010. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

*{ margin:0; padding:0; border-collapse:collapse; } html{ height:100%; } body{ position:relative; min-height:100%; } #wrapper{ padding-bottom:70px; } #footer{ position:absolute; bottom:0; left:0; z-index:500; width:100%; height:50px; overflow:hidden; }

Как прижать футер к низу страницы (руководство к действию)
Блог верстальщика » Как прижать футер к низу страницы (руководство к действию)
Мой любимый рецепт, которым я пользуюсь, как бы не соврать, лет пять. Абсолютно кроссбраузерный. Краткое изложение рецепта:

html:

Подробное изложение

Первое и главное условие, позволяющее прибить футер, он же подвал сайта к низу страницы — использование правильного доктайпа (смотрим заметку о доктайпе). Если вы хотите обойтись без него, мы с вами друг друга не поймём, а рецепт вам не поможет.

Второе: подвал страницы является отдельным блоком. Никаких лишних обёрток между футером и боди быть не должно. Возможные варианты размётки:

или

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

Задача первая: обнуляем все лишние поля и отступы:

*{
margin:0;
padding:0;
border-collapse:collapse;
}
Если это противоречит вашим принципам, достаточно обнулить вертикальные поля и отступы для html и body.

Задача вторая: прижать к низу футер нам позволит абсолютное позиционирование. Однако абсолютно позиционированный элемент всегда позиционируется относительно своего контейнера, которым является (внимание!) ближайший предок, у которого свойство position отлично от static. Если такого предка нет, элемент позиционируется относительно окна, создавая неопытным верстальщикам проблему в виде прилипания поперёк страницы. Чтобы футер признал body своим контейнером и прилип к низу страницы, а не окна, делаем боди относительно позиционированным:

body{
position:relative;
}
Теперь надо задать высоту body таким образом, чтобы при малом количестве содержания body вытягивался по высоте окна, а при большом свободно растягивался за его пределы. Сначала задаём высоту корневому элементу:

html{
height:100%;
}
Без прямого указания высоты элемента html невозможно управлять высотой его дочернего элемента body. Теперь высота html определяется высотой окна браузера. Далее задаём минимальную высоту body:

body{
min-height:100%;
}
Получаем то, что хотели: мало содержания — body тянется по окну, много содержания — растягивается свободно докуда надо. Тем, кто поддерживает IE6, придётся отдельно указать height:100%; только для него одного — в общий файл стилей это определение попасть не должно: body станет обрезаться по высоте окна.

Теперь, когда контейнер (дом родной) готов, можно заняться самим футером. Его позиционируем и прижимаем к нижней и к левой границам:

#footer{
position:absolute;
bottom:0;
left:0;
}
Поскольку абсолютно позиционированные элементы по умолчанию имеют ширину по содержанию, назначаем ширину во всё окно (а высоту какую нам надо):

#footer{
width:100%;
height:50px;
}
Боковых padding у футера быть не должно — они добавятся к стопроцентной ширине и подвал вылезет за пределы экрана. Отступы надо будет задать дочерним элементам футера.

Чтобы подвал впоследствии не перекрылся бекграундом основной области, зададим подвалу z-индекс побольше (гарантируем, что он всегда будет лежать «выше» и «ближе» к зрителю, чем прочие элементы страницы):

#footer{
z-index:500;
}
И для борьбы со случайными глюками в IE7, а также против распяливания подвала лишним содержанием добавим правило:

#footer{
overflow:hidden;
}
Подвал прижат. Осталось «оттолкнуть» от него содержание основной области. Зададим ей нижний отступ немного больше высоты подвала:

div#wrapper{
padding-bottom:70px;
}
Если основная область размечена трёхячеечной таблицей, то отступ надо задать всем трём ячейкам:

td#left, td#content, td#right{
padding-bottom:70px;
}
Всё! Схема работает — футер всегда внизу страницы, и никаких излишков, вылезающих за пределы окна при малом содержании. Применено в этом блоге и на многом множестве свёрстанных мной сайтов.

———————приписка от автора ftask————
для мобил можно ограничтить ширину вставив head метаданные

а также задать
div#wrapper{
min-width:1200px;
}
#footer{
min-width:1200px;
}

еще иногда полезно делать overflov:hidden Для wrappera