粘性页脚冲突CSS

Question

我正在尝试使用粘性页脚，但似乎与CSS冲突，我正在学习本教程，但是我想知道页脚为什么在页面中间，我该怎么做要解决这个问题。

我的代码：

jsfiddle.net/q2Vuq/

Answer 1

之所以看到脚注脚出现这种奇怪的行为，是因为您使用了position:absolute; 在您的许多元素上。 也就是说，那些包裹在#navigation div中。

看一看 （这个JSFiddle只是更清楚地说明了问题）：

我给所有令人讨厌的元素都提供了背景色（以及主体），因此您可以看到这些元素实际上导致滚动条超出了主体的高度。 绝对定位实际上将它们带到了布局之外-这意味着它们不会导致其父#navigation扩展，这反过来也不会导致其父.page-wrap扩展，最终导致页脚没有向下移动。 页脚被放置到主体的底部（由于粘性页脚CSS），该高度还不够低，因为绝对定位的元素在下方延伸得更远（它们被主体忽略了）。

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

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

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