1

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

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 "
Александр Алексеев
  • 911

2 Answers2

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>
MobiDevices
  • 7,309
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>
Andrei Fedorov
  • 5,993