Еще один способ привязать футер к низу экрана

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

Чтобы получить нужный нам результат, мы не будем делать контейнер для контента, а растянем сам контент. Чтобы контент не уходил за футер вставим в конец контента блок-растяжку нужной нам высоты.

Хаки для IE6 и Opera остаются те же.

Вот листинги (уже с хаком для IE6):

HTML

<body>
   <div id="content">Контент</div>
   <div id="finish"> </div>
   <div id="footer">Футер<div>
</body>

CSS

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}
#content, #footer {
    position:relative;
}
#content {
    min-height:100%;
    height:auto !important;
    height:100%;
    background-color: #eae7db;
}
#content #finish {
    height:50px;
}
#footer {
    margin-top:-51px;
    height:50px;
    position:relative;
    background-color: #265a7e;
}

Теперь у нас футер привязан к низу экрана, а контент растянут до футера. Вставленный в контент блок не дает полезным данным уходить за футер. Все отображается как мы хотели.

Смотрим пример: футер прижатый к низу экрана.