Прижатый футер к низу cтраницы — можно cказать культура правильного кода!
Сущеcтвует множеcтво сопособов прижать футер к низу cтраницы, однако я пользуюсь и применяю в своих проектах один способ, основанный на CSS. Чем он отличается и какие у него преимущества? Он очень прост в понимании и использовании, он имеет чистый, семантический и проверенный код в более, чем 50 браузерах.
HTML
Структура для прижатия футера. Самое главное, что нужно заметить — обернутые элементы страницы тегом <div id="wrapper-container">, кроме тега <footer>, собственно самого подвала.
<div id="wrapper-container"> <header id="header"> </header> <article id="content"> </article> </div> <footer id="footer"> </footer>
CSS
html, body { height: 100%; } #wrapper-container { min-height: 100%; } #content { overflow:auto; padding-bottom: 150px; /*padding-bottom такой же, как и высота футера */ } #footer { position: relative; margin-top: -150px; /* отрицательное значение высоты футера */ height: 150px; clear:both; } /* фикc для Opera*/ body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px; }
Обращаем внимание на padding-bottom, margin-top, height — все должны иметь одинаковое значение, за исключением отрицательного margin-top: -150px;.
В некоторых версиях оперы наблюдается баг в прижатым футером, данный код решает проблему.
Также приятно, что данный код работает во всех любимых версиях ИЕ, практически. Да, ИЕ не стал удивлять отсутствием проблем, поэтому для укрощения ИЕ7 нужно написать следующий код.
<!--[if !IE 7]> <style type="text/css"> #wrap {display:table;height:100%} </style>
Он сработает только для ИЕ7.
Добавить комментарий