页面由绝对定位构成时,页脚到底部

时间:2012-02-04 15:07:46

标签: html css css-position footer sticky-footer

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

在我尝试在页面上设置页脚之前,这很有效。

我的问题是我无法使用bottom属性放入页脚,因为bottom属性将其固定到屏幕的底部,而不是页面。因此,当页面内容比屏幕长时,页脚会在内容之下。

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

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

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

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

修改:我可以将其设置为静态定位并使用margin-top属性将其强制设置为margin-top:1000px;,然后将其强制设置到页面底部每次我在页面中添加或删除内容时都必须更改。

2 个答案:

答案 0 :(得分: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';

答案 1 :(得分:0)

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