Validcode.ruРазбираемся в верстке и не только… вместе

Нередко, мне дают задание на верстку дизайна, и в техническом задании указывают, что футер сайта всегда должен быть привязан к низу. Оно и правильно… не очень красиво смотрится, когда на сайте мало контента, и футер съезжает вверх. Не знаю как у кого, но у меня несколько раз возникали с этим проблемы.

В этом посте хочу рассказать о том, как решить эту проблему, чтобы все было красиво, валидно и кроссбраузерно. Сейчас верстаю шаблоны в основном используя описанный метод.

Все очень просто… итак… приступим.

Созадем главный блок (class=»main») и внутрь его помещаем еще два блока с контентом (class=»content») и футером (class=»footer»).

<div class=»main»>
<div class=»content»></div>
<div class=»footer»></div>
</div>

Теперь рассмотрим CSS

html, body {
margin:0; /*убираем отступы у документа, внешние…*/
padding:0; /*…и внутренние*/
height:100%; /*устанавливаем документу высоту в 100%*/
} .main {
width:100%; /*устанавливаем ширину главного блока…*/
min-height:100%; /*…и минимальную высоту (для Opera и FireFox)*/
position:relative; /*позиционируем блок относительно*/
} .content {
padding: 0 0 85px 0; /*устанавливаем отступ снизу для контента, чтобы блоки при заполнении не наезжали друг на друга*/
} .footer {
position:absolute; /*позиционируем блок абсолютно…*/
bottom:0; /*…снизу*/
width: 100%; /*устанавливаем ширину футера*/
height:85px; /*устанавливаем высоту футера*/
}

Вот и все 🙂 … Ага… чуть не забыл… хак для родного IE…
Внутри тега head прописываем строчку
<!—[if lt IE 7]><style media=»screen» type=»text/css»>.main {height:100%;}</style><![endif]—>

Теперь точно все.

Посмотреть, что получилось можно здесь.