Загрузка страницы..
Прижимаем футер к низу
Прижимаем футер к низу
2014-12-19T01:12 19 дек. 2014 01:12
Просмотров: 2251

Прижатый футер к низу 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.



Комментарии: 0

Коментарий пока нет, стань первым!

Добавить комментарий

Яндекс.Метрика Яндекс.Метрик