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

Question

[Илья Ватрушка]

Как сделать футер который всегда будет находиться в самом низу страницы?
Да, когда много информации футер это просто элемент который находится в самом низу. Но если информации мало и нужно что бы футер был в самом низу экрана? Да, можно его закрепить position: fixed но тогда адаптивность пострадает. Когда экран станет маленьким и элементы не будут помещаться на всю страницу, футер будет зафиксирован на экране, а не в самом низу страницы, как быть?

Answer 1

[Ivan Bogachev]

Как сделать футер который всегда будет находиться в самом низу страницы?

Вот так.

P.S.: Этот же пример я вставлял в ответы на другие вопросы: 374214, 379899, 396793, 401529...
Из чего можно сделать вывод: учитесь пользоваться гуглом.

Answer 2

[dom1n1k]

гуглить по словам "sticky footer" - вопрос обсосан сотни раз

Answer 3

[l55uiz]

dimox.name/press_footer_bottom_with_css - сам юзаю последний вариант

Answer 4

[Кирилл Жулин]

можно так ))

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%;
}

Answer 5

[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();
});