Реализация футера, «прибитого» к низу страницы, но уходящего под скроллер при увеличении размера контента.

HTML:

<div class="content-holder">
    <div id="content">
        Content text  Content textContent text
        Content textContent textContent text
        Content textContent textContent text
    </div>
</div>
<div id="footer">footer</div>

CSS:

html,body {
    height: 100%;
    margin: 0;
}
.content-holder {
    min-height: 100%;
}
* html .content-holder {
    height: 100%;
}
#content {
    padding-bottom: 50px; /* высота footer'а */
    background-color: #ccc;
}
#footer {
    text-align: center;
    line-height: 50px;
    position:relative;
    width: 100%;
    height: 50px;
    margin-top: -50px; /* высота footer'а */
    background-color: #f00;
}

1. Роман Says:
   апреля 5, 2009 at 18:37

   Во-первых IE6 не понимает min-height

   Во-вторых в мозилле подвал переносится на 50 пикселей выше блока контента, то есть в шапку=(

2. admin Says:
   апреля 6, 2009 at 14:27

   Для 6го ИЕ прописан height строчкой ниже через хак. У меня в ИЕ6 все ок.

   Подвал заходит на 50px на блок контента. У блока контента прописан паддинг 50 px, поэтому сам текст футер не закрывает.

3. Андр Says:
   сентября 15, 2009 at 9:55

   Все верно. Работает красиво как из под Оперы так и Ишака