13 августа 2009, 11:06

CSS: самый простой футер, приклееный вниз (Crossbrowser bottom fixed footer) Избранное

Давно использую данный «текникс», а на хабре говорят что про него никто не слышал. Странно, вооот. Поэтому встречайте ;)

Нужен простенький CSS. Мы зададим высоту html, body и враппера 100%, маргин у враппера сделаем -4строки, а футеру сделаем высоту +4строки соот. и получим нужный результат:
* {margin: 0;}
html, body {height: 100%;}
.wrapper {
    min-height: 100%;
    /* luv IE shit */
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {height: 4em;}
Вместо строк, можем использовать пиксельные величины, также не забываем о паддингах и бордерах, он тоже играют на высоту/длину!
И HTML
<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright/contacts put here</p>
    </div>
</body>


ЗЫ: див под именем push, нужен для глючных браузеров, лайк Опера, что бы текст футера не налазил на контент.
ЗЗЫ: заставить оперу понимать то, что хавает даже ИЕ6, можно скриптом. Или убить доктайп, или сместить боди на 1px, что реализовано в примере ;)

6 комментариев РСС

Sam
Не работает в Opera.
Vitaliy Bogdanets
Если убрать доктайп, работает, почему так, ай донт андерстенд ;)))
Не люблю бля оперу, сорре!!!
fiskus_boulder
мне кажется лучше все-таки не дополнительный пустой элемент вводить, а ставить нижний паддинг у блока, который внутри враппера, равный высоте футера.
как тут, например, http://cssstickyfooter.com/
Vitaliy Bogdanets
В современных браузерах работает и без «пустого» ;)
Пример хорош! Тут он распилен более подробно
Cuprum
Или без пустого блока:
HTML:
<div id=«wrapper»>
<div id=«content»>Lorem Ipsum</div>
<div id=«footer»>Footer</div>
</div>

И CSS:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
position:relative;
min-height:100%;
height:auto !important;
}
#content {
padding-bottom:50px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:50px;
background:#f00;
}
Vitaliy Bogdanets
position плохо, не работает в Опере
Cuprum
а версия Оперы?
Vitaliy Bogdanets
10я ветка
у меня бета3
Cuprum
На 9.6 все ок. Хотя следуя букве css прижиматься книзу должен. Все-таки бета.
Vitaliy Bogdanets
Багу оперы, можно вылечить небольшим смещением боди на 1 пиксел туда-обратно, она резко начинает нормально рендерить, опера — тупняк.

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter