问题标签 [sticky-footer]

我在浏览器底部定位页脚时遇到了经典问题。我已经尝试过包括http://ryanfait.com/resources/footer-stick-to-bottom-of-page/在内的方法，但效果不佳：我的页脚总是出现在 FF 和浏览器窗口的中间IE。

在 HTML 中，我得到了这个简单的结构

这是与 css 页脚问题相关的 css 代码：

我在哪里做错了？我真的什么都试过了。如果我错过了任何有用的信息，请告诉我。

感谢您提前提出任何建议。

问候，

谢谢大家的答案。它适用于：

设置位置：由于某种原因，固定在 IE 中不起作用（仍然在浏览器中间显示页脚），仅适用于 FF。

我目前正在研究CSS 布局模板模块的 JQuery 库

是否可以用 * 定义占位符的高度？
这意味着它会在必要时下推内容，或者如果完整内容小于视口，则会填充任何剩余空间。

这将是非常好的使整个粘性页脚的事情更容易和健壮。

我正在使用这里描述的CSS Sticky Footer技术，并让它发挥作用。

问题是，在我的大多数页面中，它都会在最底部添加 20 像素的边距或填充，我无法找到它的来源。

• 这里是没有余量的。
• 在这里，它带有边距。

在操作方法中它说一些额外的边距可能会从其他元素继承。但我无法追捕罪犯。任何人都可以看到我在两个示例页面上所做的不同，或者更好的是，如何解决它？

我目前正在开发一个需要一种粘性页脚的网站，但并非在所有地方都如此。

所以，http://www.hostcule.org/newsite/

对于首页，页脚自动贴在底部，但对于其他页面，它不会，例如http://www.hostcule.org/newsite/about-us

我如何使用 CSS 让它粘在底部？

页脚 div 的当前 CSS

什么 HTML/CSS 用于创建填充浏览器底部并在用户滚动时保持原位的栏？请参阅envato.com了解我在说什么。

我的粘性页脚在所有需要 Safari 和 Chrome 的浏览器中都能很好地工作，尤其是 work.html 页面本身。

http://obliqueinteractive.com/creative/work.html

我注意到，当我从样式表中删除此 css 属性时，问题消失了，但不允许页脚再粘贴

是否还有其他 css 问题迫使页脚以这种方式行事？

如何避免将带有粘性页脚的滚动条放在页面底部（不是窗口底部）？当我从内容和侧边栏中删除 height=100% 时，我不再获得滚动条。但是，这样做时，我的内容和侧边栏不会填充到页脚的所有空间。

我知道这在过去被问过很多次，但对于我的一生，我似乎无法让任何其他解决方案发挥作用。

我要做的是让页脚（这是一个在页面宽度上重复的图像）在没有足够的内容自然地将其推到底部时粘在浏览器的底部页面，当有足够的内容将其推到底部时，它就会这样做。一个示例是http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htm上的示例，它完全符合我的要求，但我也无法开始工作。

我目前实现的代码使页脚粘在页面的某个部分，下面有文本。您可以在 sourcectrl.co.uk 上看到它，但没什么可看的。这是您的观看乐趣的代码。

对不起，如果它看起来很乱！我只是想知道我是否朝着正确的方向前进，或者有什么我没有得到的？哦，是的，我正在尝试使用 html 5 标记来完成所有这些工作，这就是为什么没有 #footer 之类的原因（这可能是为什么所有解决方案都不起作用的原因吗？）。

如果有人能给我任何帮助或指导，我将不胜感激。

我已经看过Ryan Fait 的粘性页脚方法以及这里和这里的一种。

为什么这些人在#footer{position:fixed; bottom:0;}足够的时候为粘性页脚制作模板？

编辑：

我将补充一点，使用position: fixed;页脚确实会margin: auto;在（至少）某些浏览器中打破居中，从而产生对包装器标签的需求。我对上述方法的部分问题是额外的标签令人困惑，语法不正确（对于“HTML纯粹主义者”）并且它占用带宽。但是，在我看来，页脚周围的单个包装器仍然比必须开始使用的整个混乱的页面模板更好。而且，“我的”方式更加直接，占用的带宽更少。

我遵循了如何让页脚留在网页底部？在stackoverflow上发帖...

但我无法让它在 asp.net web 应用程序中工作......我正在为所有页面使用母版页......

如何使页脚粘在页面底部？

参考：