Как сделать красивый футер?

Как сделать футер который всегда будет находиться в самом низу страницы?
Да, когда много информации футер это просто элемент который находится в самом низу. Но если информации мало и нужно что бы футер был в самом низу экрана? Да, можно его закрепить position: fixed но тогда адаптивность пострадает. Когда экран станет маленьким и элементы не будут помещаться на всю страницу, футер будет зафиксирован на экране, а не в самом низу страницы, как быть?
  • Вопрос задан
  • 7927 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Как сделать футер который всегда будет находиться в самом низу страницы?

Вот так.

P.S.: Этот же пример я вставлял в ответы на другие вопросы: 374214, 379899, 396793, 401529...
Из чего можно сделать вывод: учитесь пользоваться гуглом.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
dom1n1k
@dom1n1k
гуглить по словам "sticky footer" - вопрос обсосан сотни раз
Ответ написан
Комментировать
@l55uiz
dimox.name/press_footer_bottom_with_css - сам юзаю последний вариант
Ответ написан
Комментировать
можно так ))
S-код:

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.wrapper {
  position: relative;
  min-height: 100%;
}
.content {
  padding-bottom: 90px;
}
.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 10%;
}
.footer:hover{
height:  15%;
}
Ответ написан
Комментировать
@igumenov
Чтобы не изменять структуру верстки можно средствами js и jquery
CSS
html {
    position: relative;
    min-height: 100%;
}
footer {
    display:none;
    position: absolute;
    left: 0;
    bottom: 0;
    height: auto;
    width: 100%;
}


JS
function footerAlign() {
  $('footer').css('display', 'block');
  $('footer').css('height', 'auto');
  var footerHeight = $('footer').outerHeight();
  $('body').css('padding-bottom', footerHeight);
  $('footer').css('height', footerHeight);
}


$(document).ready(function(){
  footerAlign();
});

$( window ).resize(function() {
  footerAlign();
});
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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