粘性页脚冲突css

时间:2013-07-12 02:34:38

标签: html css sticky-footer sticky

我正在尝试使用粘性页脚,但它似乎与我的CSS有冲突,我正在关注this教程,但我想知道为什么页脚位于页面中间,我该怎么做才能修复它。

我的代码:

jsfiddle.net/q2Vuq /

1 个答案:

答案 0 :(得分:1)

您使用粘性页脚看到这种奇怪行为的原因是您在许多元素上使用了position:absolute;。即,包含在#navigation div。

中的那些

Take a look at this(这个JSFiddle只是更清楚地说明了问题):

我已经给出了所有背景颜色(以及正文)的违规元素,因此您可以看到这些元素实际上导致滚动条延伸超出正文的高度。绝对定位实际上将它们置于布局之外 - 这意味着它们不会导致其父#navigation扩展,这反过来又不会导致其父.page-wrap扩展,这最终导致页脚不要感动。页脚被放到身体的底部(由于粘性页脚CSS),因为绝对定位的元素在下方延伸得更远(因为它们被身体忽略),所以它不够低。

所以,考虑到这一点,你如何解决这个问题?不幸的是,你的粘性页脚在很大程度上依赖于所有内容将被计入其上方布局的假设,或者至少它上面的包装元素将足够高以考虑其所有内容。这使你难以保持绝对定位的使用。

最佳解决方案可能是删除文档中绝对定位元素的当前使用情况,并重新设置您放置元素的方式。由于我不知道你的目标是什么样的设计,我无法提供一个例子。另一种方法是在.page-wrap内放置一个内部包装元素,并设置min-height,使其低于最低绝对定位元素。但是,第二种方法不够灵活,我不推荐它。

如果这不是你想要的,或者在这个特殊问题上需要更多的帮助,请告诉我,我会很乐意进一步提供帮助。祝你好运!