页面为绝对定位时页脚到底

我有一个页面，其中的部分由绝对定位的div构成。页面为绝对定位时页脚到底

这很好，直到我试图获得一个页脚到页面上。

我的问题是，我不能使用底部属性来放置页脚，因为底部属性将它修复到屏幕的底部，而不是页面。所以当页面内容比屏幕更长时，页脚就会进入内容。

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

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

这里是jsbin：http://jsbin.com/oxefev/edit#javascript,html

这个问题将是非常容易解决，如果有一个方法，使bottom CSS属性转到页，而不是在屏幕的底部。

编辑：我可以只让静态地定位和使用margin-top属性将其设置为margin-top:1000px;迫使它到页面的底部，但后来我不得不改变我每次添加或删除内容这一页。

来源

2012-02-04 Mark Kramer

这可能是因为一个页面没有底限，它可能会永远持续下去。是否有理由不能简单地给你的页脚提供超出你的内容的绝对位置？ – Umbrella 2012-02-04 15:16:47

该页面确实有底部限制。每一页都有一个你不能再滚动的点。这是我想要提到的一点。我可以将它放在最后一个元素之后，但是如果我在网站上制作多个页面，该怎么办？两页上的页脚不会处于同一高度。即使这不是问题，每次更改页面上的内容时，我都必须更改页脚的高度。不，这只是一个坏主意。只要将它自动放置在页面底部就简单多了。 – 2012-02-04 15:23:23

“无底限”意味着您可以随时在下面添加更多内容，将底部向下推。这使得“底部”的像素位置不明确。 – Umbrella 2012-02-04 15:39:30

我的第一个建议是：不要绝对放置一切。它有什么好处？

尽管如此，你可以实现你所寻求的与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';

来源

2012-02-04 15:36:44 Umbrella

@MarkKramer一旦您创建了多个网站，您将对此评论感到后悔。 – 2012-02-04 15:40:19

另外，好主意。我知道如何做到这一点，所以我不敢相信我没有想到它= S – 2012-02-04 15:43:45

我已经做了4个网站，并完成了其他几个人的工作。没有理由不去绝对定位事物。 – 2012-02-04 15:44:25

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

来源

2012-11-07 11:19:22 Mike

页面为绝对定位时页脚到底

回答

相关问题