我正在尝试使用粘性页脚，但它似乎与我的 css 有冲突，我正在关注本教程，但我想知道为什么页脚在页面中间，我该怎么办要解决这个问题。
我的代码：
jsfiddle.net/q2Vuq/
问问题
192 次
1 回答
1
您看到粘性页脚的这种奇怪行为的原因是您position:absolute;在许多元素上使用了。即，包裹在#navigationdiv 中的那些。
看看这个（这个 JSFiddle 只是更清楚地说明了这个问题）：
我已经为所有有问题的元素（以及正文）赋予了背景颜色，因此您可以看到这些元素实际上导致滚动条超出了正文的高度。绝对定位实际上将它们带出布局 - 这意味着它们不会导致其父级#navigation扩展，这反过来不会导致其父级.page-wrap扩展，最终导致页脚不会向下移动。页脚被放置在主体的底部（作为粘性页脚 CSS 的结果），它不够低，因为绝对定位的元素甚至延伸到下方（因为它们被主体忽略了）。
那么，考虑到这一点，你如何解决这种行为？不幸的是，您的粘性页脚很大程度上依赖于这样一种假设：所有内容都将被纳入其上方的布局中，或者至少其上方的包装元素将足够高以考虑其所有内容。这使您难以保持对绝对定位的使用。
最好的解决方案可能是删除文档中当前使用的绝对定位元素，并重新设计放置元素的方式。由于我不知道您的实际目标是什么设计，因此我无法提供此示例。另一种方法是在 的内部放置一个内部包装器元素.page-wrap，并使用一个min-height集合使其低于甚至最低的绝对定位元素。但是，第二种方法不太灵活，我不推荐它。
如果这不是您想要的，或者在这个特定问题上需要更多帮助，请告诉我，我很乐意为您提供进一步的帮助。祝你好运！
于 2013-07-12T04:04:04.467 回答