Сначала создадим структуру страницы по следующей схеме:
Очень ВАЖНО, чтобы элементы верстки имели такую же иерархию как на схеме, особенно это касается элемента div#footer. Он не должен входить в div#wrapper, который является «оберткой» заголовка и содержимого.
И приступим к написанию css правил. Сначала присвоим элементам html и body высоту 100%:
CSS
Затем присвоим следующие правила элементу #wrapper, который является «оберткой» заголовка и содержимого:
CSS
Присвоим элементу div#wrapper
минимальную высоту в 100%. Таким образом мы растянули 3 элемента по высоте (html, body, wrapper). Так как ie6 не поддерживает свойство min-height
, для него пишем следующие правила, которые заменят ему min-height
.
CSS
Значение высоты в ie6 у элемента div#wrapper
будет 100%, а в остальных браузерах оно будет равно auto
, так как ie6. не поддерживает «!important». Таким образом мы обошли непонимание min-height
в ie6.
Так как элемент div#footer (подвал) не входит в «обертку»( div#wrapper) и находится под ним – «обертка» как-бы «давит» на него и он оказывается в самом низу окна браузера.
Правда под ним появляется расстояние до нижней границы окна. Это расстояние равно высоте элемента div#footer. Поэтому для того, чтобы ее убрать мы прописываем следующие правила этому элементу:
CSS
В первую очередь указываем его высоту (height:76px;), а затем «поднимаем» его относительно себя на значение его высоту (margin-top:-76px;). Таким образом расстояние, которое было после «подвала» исчезает.
Хотелось бы подчеркнуть еще один момент – если текста в блоке с основным содержимым много, то этот текст наложится на наш «подвал», чтобы избежать этого нужно добавить к блоку с текстом основного содержимого (div#content
) внутренний отступ снизу (свойство padding-bottom
), значение которого будет больше значения высоты «подвала». Например, вот так:
CSS
Есть еще один альтернативныый вариант избежать наложения текста из блока с основным содержимым на «подвал». Нужно в блок с основным содержимым добавить пустой элемент <div>
с высотой отступа от «подвала».
В итоге мы имеем страничку, «подвал» на которой всегда будет находиться внизу, независимо от количества текста в блоке с основным содержимым.
Создание верстки тянущейся по высоте на 100%. Второй способ.
Существует еще один способ размещения «подвала» внизу окна браузера независимо от количества контента на странице. Структура html документа должна быть такой, как показано на схеме выше. Имеется ввиду тот момент, что подвал не должен входить в «обертку». Этот способ основан на абсолютном позиционировании элемента «подвала» (div#footer
). Позиционировать его мы будем относительно элемента body документа.
Итак начнем сначала. Вот стили для body
и html
элементов.
CSS
Стили элемента html
не изменились, а вот со стилями элемента body
произошли значительные изменения.
Мы убрали у элемента div#wrapper
(«обертка») свойства устанавливающие высоту и применили их к body
.
CSS
Также добавили свойство position:relative;
для того чтобы «подвал», который будет позиционирован абсолютно, отсчитывал свое положение от элемента body
.
CSS
У «подвала» стили также поменялись. Сначала применили к элементу div#footer
абсолютное позиционирование (position:absolute; bottom:0;). Таким образом «прибили» его к низу окна. В этот момент ширина «подвала» уменьшилась до ширины его содержимого.