html - 粘性页脚冲突 css

Question

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

我的代码:

jsfiddle.net/q2Vuq/

Answer 1

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

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

我已经为违规元素(以及正文)提供了所有背景色，因此您可以看到这些元素实际上导致滚动条超出正文的高度。绝对定位实际上将它们带出布局——这意味着它们不会导致其父级 #navigation 展开，而这反过来又不会导致其父级 .page-wrap 展开展开，最终导致页脚不会向下移动。页脚被放在主体的底部(由于粘性页脚 CSS)，这还不够低，因为绝对定位的元素甚至延伸到更下方(因为它们被主体忽略)。

那么，考虑到这一点，您如何解决此问题？不幸的是，您的粘性页脚在很大程度上依赖于所有内容都将被计算到其上方的布局中的假设，或者至少其上方的包装元素将足够高以说明其所有内容。这使您很难保持对绝对定位的使用。

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

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