Question

当你知道页脚的高度时，有一个简单的粘性页脚解决方案。 http://getbootstrap.com/examples/sticky-footer/

但是当页脚高度可以改变时，我们如何解决粘性页脚

Answer 1

如果您查看了上述页面的源代码，您会看到有实际的评论，告诉您如何更改页脚高度：

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

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

Answer 2

如果您不知道页脚所需的高度，请从.footer类中删除“height：60px”。页脚高度现在将扩展以适合其内容。

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

您还需要动态设置body-bottom of bottom，以便它不会在绝对定位的页脚下滑动。你可以用javascript做到这一点。 Jquery示例：

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

此处示例： http://codepen.io/anon/pen/tFcJr

还有另外两种方法可以实现粘性页脚。使用表格：http://codepen.io/anon/pen/AlnHc 使用flexbox：http://codepen.io/anon/pen/qysLg。我不确定这些中的任何一个是如何与bootstrap一起使用的，显然flexbox仅支持IE10 +。

Answer 3

这是来自bootstrap示例的代码：

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

您可以更改身高属性...

.footer {
  height: auto;
}

具有响应内容的bootstrap粘性页脚

3 个答案: