简体繁体 English

粘性页脚冲突CSS

[英]Sticky Footer conflict css

原文 2013-07-12 02:34:37 4 1 html/ css/ sticky-footer/ sticky

I'm trying to use a sticky footer, but it seems to having a conflict with my css, I'm following this tutorial, but I want to know why the footer is in the middle of the page, what do I have to do to fix it. 我正在尝试使用粘性页脚，但似乎与CSS冲突，我正在学习本教程，但是我想知道页脚为什么在页面中间，我该怎么做要解决这个问题。

My code: 我的代码：

jsfiddle.net/q2Vuq/ jsfiddle.net/q2Vuq/

1 个解决方案

The reason why you're seeing this strange behaviour with the sticky footer is because of your usage of position:absolute; 之所以看到脚注脚出现这种奇怪的行为，是因为您使用了position:absolute; on a number of your elements. 在您的许多元素上。 Namely, the ones wrapped within the #navigation div. 也就是说，那些包裹在#navigation div中。

Take a look at this (this JSFiddle just illustrates the problem more clearly): 看一看（这个JSFiddle只是更清楚地说明了问题）：

I've given the offending elements all a background colour (as well as the body), so you can see that these elements are actually causing the scroll bar to extend beyond the height of the body. 我给所有令人讨厌的元素都提供了背景色（以及主体），因此您可以看到这些元素实际上导致滚动条超出了主体的高度。 Absolute positioning actually takes them outside of the layout - meaning they don't cause their parent #navigation to expand, which in turn does not cause its parent .page-wrap to expand, which ultimately results in the footer not getting moved down. 绝对定位实际上将它们带到了布局之外-这意味着它们不会导致其父#navigation扩展，这反过来也不会导致其父.page-wrap扩展，最终导致页脚没有向下移动。 The footer gets put to the bottom of the body (as a result of the sticky footer CSS), which isn't quite low enough since the absolute-positioned elements extend even further below (as they are ignored by the body). 页脚被放置到主体的底部（由于粘性页脚CSS），该高度还不够低，因为绝对定位的元素在下方延伸得更远（它们被主体忽略了）。

So, with that in mind, how do you fix this behaviour? 因此，考虑到这一点，您如何解决此问题？ Unfortunately, your sticky footer relies largely on the assumption that all content will be figured into the layout above it, or at least that the wrapper element above it will be tall enough to account for all its contents. 不幸的是，您的粘性页脚在很大程度上取决于以下假设：所有内容都将被计入其上方的布局中，或者至少其上方的包装元素将足够高以说明其所有内容。 This makes your use of absolute positioning hard to keep. 这使您难以使用绝对定位。

The best solution is probably to remove your current usage of absolute-positioned elements in your document, and rework how you're going to place your elements. 最好的解决方案可能是删除文档中当前绝对位置元素的用法，并重新设计元素的放置方式。 Since I don't know what design you're actually aiming for, I can't provide an example of this. 由于我不知道您真正针对的是什么设计，因此我无法提供一个示例。 An alternative is to place an internal wrapper element inside of .page-wrap , with a min-height set such that it goes below even the lowest absolute-positioned element. 另一种选择是将内部包装器元素放置在.page-wrap ，并设置min-height ，使其甚至低于最低的绝对位置元素。 However, this second method isn't too flexible, and I wouldn't recommend it. 但是，第二种方法不太灵活，我不推荐使用。

If this isn't what you were looking for, or need more assistance in this particular matter, let me know and I'll be happy to help further. 如果这不是您想要的，或者在此特定问题上需要更多帮助，请告诉我，我们将很乐意为您提供进一步的帮助。 Good luck! 祝好运！