13 августа 2009, 11:06
CSS: самый простой футер, приклееный вниз (Crossbrowser bottom fixed footer)
Давно использую данный «текникс», а на хабре говорят что про него никто не слышал. Странно, вооот. Поэтому встречайте ;)
Нужен простенький CSS. Мы зададим высоту html, body и враппера 100%, маргин у враппера сделаем -4строки, а футеру сделаем высоту +4строки соот. и получим нужный результат:
И HTML
ЗЫ: див под именем push, нужен для глючных браузеров, лайк Опера, что бы текст футера не налазил на контент.
ЗЗЫ: заставить оперу понимать то, что хавает даже ИЕ6, можно скриптом. Или убить доктайп, или сместить боди на 1px, что реализовано в примере ;)
Нужен простенький 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 комментариев РСС
Не люблю бля оперу, сорре!!!
как тут, например, http://cssstickyfooter.com/
Пример хорош! Тут он распилен более подробно
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;
}
у меня бета3
Ваш комментарий