загрузочный липкий нижний колонтитул с адаптивным содержимым

#css #twitter-bootstrap

Вопрос:

Существует простое решение для липкого нижнего колонтитула, когда вы знаете высоту нижнего колонтитула. http://getbootstrap.com/examples/sticky-footer /

Но когда высота нижнего колонтитула может измениться, как мы можем решить проблему липкого нижнего колонтитула

1. На самом деле, в приведенном вами примере для нижнего колонтитула не задана явная высота. Он расширяется до содержимого внутри него.

2. @joshboley на самом деле есть высота. Он включен .footer . Прямо сейчас он установлен на 60 пикселей. Вы бы просто изменили его.

Ответ №1:

Если вы проверите исходный код упомянутой вами страницы, вы увидите, что там есть реальные комментарии, в которых говорится, что нужно сделать, чтобы изменить высоту нижнего колонтитула:

 body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.footer {
    /* Set the fixed height of the footer here */
   height: 60px;
}

1. Я знаю, что я имею в виду, когда у вас есть динамический контент в вашем нижнем колонтитуле, поэтому вы не можете указать высоту в css

2. тогда вы бы просто поставили height: auto;

Ответ №2:

Если вы не знаете желаемую высоту нижнего колонтитула, удалите «height: 60px» из класса .footer. Высота нижнего колонтитула теперь будет увеличиваться, чтобы соответствовать его содержимому.

 .footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
}

Вам также нужно будет динамически устанавливать margin-bottom тела, чтобы оно не скользило под абсолютно расположенным нижним колонтитулом. Вы можете сделать это с помощью javascript. Пример Jquery:

 $(function(){
  var footerHeight = $(".footer").height();
  $("body").css("margin-bottom", footerHeight);
  $(".footer").css("margin-top", -footerHeight);
});

Пример здесь:
http://codepen.io/anon/pen/tFcJr

Есть также 2 других способа добиться липкого нижнего колонтитула. Использование таблиц:http://codepen.io/anon/pen/AlnHc Использование flexbox: http://codepen.io/anon/pen/qysLg. Я не уверен, как любой из них будет работать с bootstrap, хотя и очевидно, что flexbox поддерживается только IE10 .

1. Да, но теперь, если содержимое страницы будет длиннее высоты экрана, оно будет перекрываться, потому что мы не разместили поле от тела до нижнего колонтитула

2. Ну, я искал решение только с использованием CSS, но это все равно будет работать, поэтому я отмечу его для других

Ответ №3:

Вот код из примера начальной загрузки:

 .footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

Вы бы изменили атрибут высоты…

 .footer {
  height: auto;
}