Прижимаем футер к низу страницы

Здравствуйте.

Сегодня я хочу описать способ при котором футер или в народе «подвал»  привязывается к низу страницы, и реагирует адекватно на различное количество текста

И так начнём с необходимой разметки 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, врапера и футера нельзя указывать положительные верхний или нижний margin/padding. Сделать это можно для вложенных элементов.

2 комментария к “Прижимаем футер к низу страницы”

Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *