CSS 粘性页脚 - 两个水平滚动条？
我正在使用 CSSStickyFooter.com 教程来尝试让完美的粘性页脚正常工作。
这是一个关于“main”div 上的 overflow:auto; 样式的具体问题。完成此操作后，当用户缩小窗口时，我会在页面中间看到一个水平滚动条。这个添加的滚动条不能像它应该的那样自动出现在窗口底部吗？
I am using the CSSStickyFooter.com tutorial in my amateurishly imperfect attempt to get the perfect sticky footer working.
This is a specific question regarding the overflow:auto; style on the "main" div. With this in place, and when the window is narrowed by the user, I get a horizontal scrollbar halfway down my page. Can't this added scrollbar automatically appear at the bottom of the window like it's supposed to?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
滚动条出现在奇怪位置的原因是它位于
上而不是页面上。这是使用overflow:auto;的结果。overflow:auto;告诉 CSS，当特定的太小而无法显示其所有内容时，您希望获得滚动条（水平或垂直）。因此，您的问题的直接答案是否定的；您无法将滚动条放置在页面上的其他位置，因为它附加到
上。然而，可能有办法解决这个问题。
首先，如果您不介意显示较窄时内容被剪裁，您可以设置滚动条，使其仅提供水平滚动条，并抑制垂直滚动条。您可以这样做：
或者，可能还有其他方法来修复您的代码； CSSStickyFooter.com 是众所周知的，所以如果它适用于其他人而没有这个故障，那么它可能可以工作也适合你。但我们需要更多地查看您的代码，以便帮助您进一步了解这一点。
The reason you're getting the scrollbar in an odd place is because it is on the
<div>rather than on the page. This is a result of usingoverflow:auto;.overflow:auto;tells CSS that you want that particular<div>to get scrollbars (either horizontal or vertical) when it is too small to display all its content.Therefore the direct answer to your question is No; you can't position the scrollbar elsewhere on the page, since it is attached to the
<div>.However, there may be ways around it.
Firstly, if you don't mind the content being clipped when the display is narrow, you can set the scrollbars such that it only gives you a horizontal one, and supresses the vertical one. You'd do that something like this:
Alternatively, there may be other ways to fix your code; CSSStickyFooter.com is quite well know, so if it works for others without this glitch, it can probably be made to work for you too. But we'd need to see a bit more of your code in order to help you further down that line.
我研究并尝试了多种粘性页脚技术，发现这个效果很好：
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
我在使用之前使用的许多其他技术时遇到了问题。如果使用 CSSStickyFooter.com 不是您的项目的严格要求，我建议您使用我提到的链接中描述的技术。
I researched and tried many techniques for sticky footers and found this one to work great:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I had problems with many other techniques I used before that one. If using CSSStickyFooter.com is not a strict requirement for your project, I recommend you use the technique described in the link I referred to.