Как прижать футер к низу страницы

25.03.2014
Довольно распространенная проблема – нужно прижать футер ("подвал сайта") к низу страницы. Это нужно на страницах с малым количеством контента. Не стоит путать этот вариант с фиксированным футером (когда, при прокрутке страницы, подвал всегда виден и прибит к нижней границе окна браузера) 

HTML:
<body>
    <div class="wrapper">
        Тут должно быть все, что может влиять на высоту страницы, 
        тут должна быть и шапка, и меню, и контент, и ...

        <div class="footer-push"></div>
    </div>
    <div class="footer">
        Подвал
    </div>
</body>
 


CSS:
html, body
{
    height: 100%;
    margin: 0;
    padding: 0;
}
.wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 0 -100px 0; /* отрицательный нижний отступ на высоту футера */
    padding: 0;
}
.footer-push, .footer
{
    height: 100px;
    margin: 0;
    padding: 0;
}


Еще, у body, wrapper и футера нельзя указывать положительные верхний или нижний margin / padding. Сделать это можно для вложенных элементов.

Категории: HTML
Яндекс.Метрика