【发布时间】：2013-07-12 14:25:03
【问题描述】：
【问题讨论】：
标签： html css sticky-footer sticky
【发布时间】：2013-07-12 14:25:03
【问题描述】：
您看到这种带有粘性页脚的奇怪行为的原因是您在许多元素上使用了position:absolute;。即，包裹在#navigation div 中的那些。
Take a look at this（这个 JSFiddle 只是更清楚地说明了问题）：
我已经为所有有问题的元素（以及正文）赋予了背景颜色，因此您可以看到这些元素实际上导致滚动条超出正文的高度。绝对定位实际上将它们带到了布局之外——这意味着它们不会导致其父 #navigation 扩展，这反过来不会导致其父 .page-wrap 扩展，最终导致页脚不会向下移动。页脚被放置在主体的底部（作为粘性页脚 CSS 的结果），它不够低，因为绝对定位的元素甚至延伸到下方（因为它们被主体忽略了）。
那么，考虑到这一点，您如何解决这种行为？不幸的是，你的粘性页脚很大程度上依赖于这样一个假设，即所有内容都将被纳入其上方的布局中，或者至少它上方的包装元素将足够高以考虑其所有内容。这使您难以保持对绝对定位的使用。
最好的解决方案可能是删除文档中当前使用的绝对定位元素，并重新设计放置元素的方式。由于我不知道您的实际目标是什么，因此我无法提供此示例。另一种方法是在.page-wrap 内放置一个内部包装元素，并设置min-height，使其低于最低绝对定位元素。但是，第二种方法不太灵活，我不推荐它。
如果这不是您想要的，或者在此特定问题上需要更多帮助，请告诉我，我们很乐意提供进一步帮助。祝你好运！
【讨论】：
-
谢谢你的回答，基于这个例子cinemaclassico.com.br的设计你能帮我吗，不同的是我有一个固定的顶栏，我想添加那个粘性页脚，我该怎么做替换绝对定位的元素？
-
好吧，如果不知道
#navigationdiv 的孩子的预期位置，很难给出明确的答案。现在，即使它们被纳入布局，它们也会显得格格不入——你能指定这些元素对应于示例设计的哪些部分吗？ -
在左侧，类别在哪里：ação,aventura... 这将是#categoria，#navigation 将是包含搜索框的栏，内容在哪里#apDiv2 至极是可编辑的模板。
-
抱歉耽搁了。不幸的是，虽然我对这个布局有点小题大做，但很明显，我无法帮助您在当前状态下进行布局。主要问题是我不知道 PHP 包含的 HTML，所以我不确定某些元素（例如您提到的
#categoria元素）将如何嵌套。当部分文档丢失时，JSFiddle 会失去一些用处。 -
好的，但是基于这个布局：jsfiddle.net/q2Vuq/ 你会如何解决这个问题？感谢您的宝贵时间。