Прилипающий футер

312

25 февраля 2017, 03:30

Мне нужно сделать прилипающий футер, у которого высота не фиксирована. Сделал при помощи данного кода:

if ($(document).height() <= $(window).height()) {
        $("footer.footer").addClass("navbar-fixed-bottom");
    };

Но появилась проблема Мне нужно что бы фоновая картинка была до конца страницы но если добавить в код блока с фоном height: 100%; то появляется вертикальная прокрутка, тк блок становится по высоте body. Как это можно исправить? Расположение блоков

body
  header
  div class="full-width full-width-bg" //здесь фон
  footer class="footer "

Answer 1

* { 
  padding: 0; 
  margin: 0; 
} 
 
.container { 
  display: flex; 
  flex-direction: column; 
  width: 100vw; 
  min-height: 100vh; 
} 
 
header, 
main, 
footer { 
  display: block; 
} 
 
header { 
  background-color: red; 
  flex: 0 0 10vh; 
} 
 
main { 
  background-color: green; 
  flex: 8 0; 
} 
 
footer { 
  background-color: blue; 
  flex: 1 0; 
  min-height: 10vh; 
}

<div class="container"> 
  <header></header> 
  <main></main> 
  <footer> 
  </footer> 
</div>

Answer 2

1. Решение через абсолютное позиционирование для фиксированной высоты футера

html { 
  /* Растягиваем документ на всю высоту окна */ 
  height: 100%; 
} 
 
body { 
  position: relative; 
  /* Растягиваем body по высоте html */ 
  min-height: 100%; 
} 
 
main { 
   /* Выставляем отступ с высотой footer */ 
  padding-bottom: 30px; 
} 
 
footer { 
  /* Позиционируем footer внизу main */ 
  position: absolute; 
  bottom: 0; 
  width: 100%; 
  /* Высота footer */ 
  height: 30px; 
}

<body> 
  <header> 
   header 
  </header> 
  <main> 
   content 
  </main> 
  <footer> 
   footer 
  </footer> 
</body>

2. Решение через Flexbox для адаптивной высоты футера

body { 
  display: flex; 
  flex-direction: column; 
  min-height: 100vh; 
} 
 
main { 
  /* Чтобы занимал оставшееся пространство */ 
  flex-grow: 1; 
} 
 
footer { 
  /* Чтобы footer не уменьшался */ 
  flex-shrink: 0; 
}

<header> 
  header 
</header> 
<main> 
  content 
</main> 
<footer> 
  footer 
</footer>

3. Решение через таблицы для адаптивной высоты футера

body { 
  display: table; 
  min-height: 100vh; 
} 
 
main { 
  display: table-row; 
  /* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не позволит ему вытолкнуть header и footer */ 
  height: 100%; 
}

<header> 
  header 
</header> 
<main> 
  content 
</main> 
<footer> 
  footer 
</footer>

4. Решение с использованием jQuery для адаптивной высоты футера

// Высчитываем высоту footer и делаем соответствующий отступ от main: 
function footer(){ 
$('main').css('padding-bottom',$('footer').height()); 
} 
window.addEventListener('load',footer); 
window.addEventListener('resize',footer);

html { 
  /* Растягиваем документ на всю высоту окна */ 
  height: 100%; 
} 
 
body { 
  position: relative; 
  /* Растягиваем body по высоте html */ 
  min-height: 100%; 
} 
 
main { 
   /* Выставляем отступ с высотой footer по умолчанию */ 
  padding-bottom: 30px; 
} 
 
footer { 
  /* Позиционируем footer внизу main */ 
  position: absolute; 
  bottom: 0; 
  width: 100%; 
  /* Высота footer по умолчанию */ 
  height: 30px; 
}

<html> 
<head> 
 <script src='https://code.jquery.com/jquery-3.1.1.slim.min.js'></script> 
</head> 
<body> 
  <header> 
   header 
  </header> 
  <main> 
   main 
  </main> 
  <footer> 
   footer 
  </footer> 
</body> 
</html>