Прилипание футера к низу страницы?

Всем доброе утро. Задача состоит в том, чтобы на страницах, где мало контента, футер находился всегда внизу страницы и не было скролла.
Плюс к этому, никаких position absolute, fixed.

Реализовал я это так:

$(document).ready(function () {
    var windowHeight = $(window).height(),
        headerHeight = $('header').height(),
        footerHeight = $('footer').height(),
        contentHeight = windowHeight - headerHeight - footerHeight;
        $('.main').css('min-height', contentHeight);
    $(window).resize(function () {
     var windowHeight = $(window).height(),
     headerHeight = $('header').height(),
     footerHeight = $('footer').height(),
     contentHeight = windowHeight - headerHeight - footerHeight;
     $('.main').css('min-height', contentHeight);
    })
});

Но проблема заключается в том, что на некоторых страницах появляется скролл. Вопрос в том как решить эту проблему?
  • Вопрос задан
  • 289 просмотров
Пригласить эксперта
Ответы на вопрос 1
bugo_aneo
@bugo_aneo
Верстальщик по жизни, йог, буддист, кофеман
Почему вам нужен именно скрипт? не подойдет ли CSS решение? БЕЗ position absolute, fixed))))

.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex: 1 0 auto;
}
.footer {
flex: 0 0 auto;
}

Есть и без ФБокса, но тогда вам нужна ФИКСИРОВАННАЯ высота футера.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы