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 "
2

2 ответа 2

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>

1
  • Спасибо! Второй вариант классный, только ie не хочет поддерживать. 25 фев 2017 в 21:36
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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.