当页面由绝对定位构成时，将页脚置于底部答案

【问题标题】：Getting footer to bottom when page is made of absolute positioning当页面由绝对定位构成时，将页脚置于底部
【发布时间】：2012-02-26 20:20:34
【问题描述】：

我有一个页面，其中的部分由绝对定位的 div 组成。

在我尝试在页面上添加页脚之前效果很好。

我的问题是我不能使用底部属性放入页脚，因为底部属性将其固定在屏幕底部，而不是页面底部。因此，当页面内容比屏幕长时，页脚将位于内容下方。

而且我不能只将页脚放在元素流的底部，因为没有元素流。所有的 div 都是绝对定位的，所以如果我放入任何静态或相对定位的内容，它会直接在我的页眉下方的页面顶部。

并且这些粘性页脚都不起作用，因为它们依赖于元素流来将页脚放在页面底部。

如果有办法让bottom css 属性进入页面底部而不是屏幕，这个问题将非常容易解决。

编辑：我可以将其设为静态定位并使用margin-top 属性通过将其设置为margin-top:1000px; 将其强制到页面底部，但随后我将不得不更改它每次我在页面中添加或删除内容时。

【问题讨论】：

这可能是因为一个页面没有下限，它可以永远持续下去。您是否有理由不能简单地为您的页脚提供超出内容的绝对位置？
页面确实有下限。每个页面都有一个你不能再滚动的地方。这就是我想把它移到的地方。我可以将它放在最后一个元素之后，但是如果我在网站上制作多个页面怎么办？两页的页脚高度不同。即使这不是问题，每次更改页面上的内容时，我都必须更改页脚的高度。不，这只是个坏主意。将其自动放在页面底部会简单得多。
“无下限”意味着您可以随时在下方添加更多内容，将底部向下推。这使得“底部”的像素位置不明确。
您应该只使用position: absolute 作为实现其他方式无法实现的样式的一种方式。如果我从您的所有元素中删除 position: absolute 并将 margin: auto 添加到 content-wrapper（并从页脚中删除疯狂的 margin-top），那么您的网站将准确显示您所描述的内容。
是的，但是为了用户友好，我删除了那个 jsbin 的所有元素都不能正常工作。我将努力将我的页面转换为使用常规元素，但绝对定位更容易

【解决方案1】：

jQuery(document).height() 为我返回正确、一致的跨浏览器结果。一旦您知道内容的高度，定位页脚应该很容易。

【讨论】：

【解决方案2】：

我的第一个建议是：不要绝对定位所有内容。有什么好处？

不过，您可以通过 javascript 的招标应用来实现您的目标。比如：

document.getElementById('footer').style.top = document.getElementById('content-wrapper').clientHeight + 150 + 'px';

编辑：

如果您调整标题高度（+/- 几个像素，基于盒子模型），这似乎也有效并且不需要更改：

document.getElementById('footer').style.top = document.body.clientHeight + document.getElementById('footer').clientHeight + 'px';

【讨论】：