我已经成功在我的应用程序中实现了它,关键是使底部样式与传递给固定调用的底部一致。如果您的页脚具有固定高度,并且最近的定位父级是body,则需要为两者传递相同的值。这对于Bootstrap 2.3文档来说足够好,如
此处和
此处所示。
--
假设您没有固定高度的页脚:
步骤1:最近的定位父级(offset parent)
首先,我们使用绝对定位将其固定在底部,但由于您最近的定位父级将是body(包括页脚),因此您没有底部的固定值。为了解决这个问题,我们必须创建一个新的定位父级,它包含除页脚以外的所有内容(重要提示:标题可能也在外面)。将position: relative;
设置为顶部的.container
或其祖先之一(重要提示:页脚必须在此元素之后)。
步骤2:页脚高度
现在,您的底部相对于其容器而不是body,但是affix的底部值(用于知道何时将affix固定在底部)仍然相对于body的末尾,因此您必须传递一个函数来计算容器后面元素的高度,如果只有页脚,则足以使用此代码:$('footer').outerHeight(true)
。
步骤3:故障排除
现在,您已经全部正确了,但是仍有三件事可能导致粘贴位置不正确并出现疯狂闪烁:
您没有考虑到除页脚以外的其他视觉元素,比如第二个页脚或者不总是显示的有用的 rails-footnotes gem;
浏览器扩展会附加元素到DOM中,如果它们被隐藏或者不在流中,那么就不应该计算它们的高度。解决方法是只计算您的应用程序已知的元素,但是扩展可能会破坏您的应用程序。您可以通过使用没有安装扩展的浏览器或配置来测试扩展是否会引起问题,或者通过进入"隐私模式"(Chromium的无痕浏览 (Ctrl+Shift+n),Firefox的隐私浏览 (Ctrl+Shift+p))来检查。
Javascript库也会附加元素到DOM中,因此也不应计算其高度。
为了解决这些问题,您可以尝试使用整个单词(带Underscore.js的CoffeeScript):
_($('footer').nextAll(':visible').addBack())
.filter((el) -> el.offsetParent?)
.reduce(((memo, el) -> memo + $(el).outerHeight(true)), 0)
同样的事情,使用Javascript和jQuery.fn.each:
var sum = 0
$('footer').nextAll(':visible').each(function() {
this.offsetParent != null && sum += $(this).outerHeight(true)
}
return sum
或者你只考虑你已知的元素(我更喜欢这种方式,另一种是我为了挑战而编写的):
$('footer').outerHeight(true) + ($('#footnotes_debug').outerHeight(true) || 0)