CSS 粘性页脚的水平溢出问题
查看 http://www.cssstickyfooter.com/ 并将浏览器窗口大小调整为 < 600 像素。
请注意，当内容溢出超出其宽度时，页眉和页脚元素如何变得不足。
有什么方法可以防止这种情况发生，以便当页面水平滚动时，页眉和页脚不会出现不足？
Take a look at http://www.cssstickyfooter.com/ and resize your browser window to < 600px.
Notice how the header and footer elements fall short as the content overflows beyond their width.
Is there any way to prevent this from happening so that when the page scrolls horizontally, the header and footer don't fall short?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
可以通过为不随文档其余部分拉伸的元素分配 min-width 来解决此问题。
在示例站点的 DOM 检查器中，尝试添加：
...到页眉和页脚。问题解决了！我已经使用过很多次了，在所有浏览器和设备上都取得了良好的结果。
This issue can be solved by assigning a min-width to the elements that are not stretching along with the rest of the document.
In a DOM inspector on the example site, try adding:
...to the header and footer. Problem solved! I've used this quite a few times with good results across all browsers and devices.
您看到的是使窗口比 .main、.foot 和其他具有静态宽度的布局元素更窄的副作用。如果它们没有宽度或宽度较小，则效果很好。
What you're seeing is a side effect of making the window more narrow than .main, .foot, and the other layout elements with static width. If they had no widths, or smaller widths, it works just fine.
没有人真正使用宽度小于 600 像素的浏览器。即使 800x600px 对大多数人来说都快要死了，看看这个调查结果：http://www.w3schools .com/browsers/browsers_display.asp
您只需担心移动设备的较小页面宽度的水平溢出和其他问题，在这种情况下，适当的移动浏览器和特定的样式表将解决交易。
No one actually users a browser with less than 600px width. Even 800x600px is dying with most people, take a look on this survey results: http://www.w3schools.com/browsers/browsers_display.asp
You should only worry with horizontal overflow and other problems for smaller page widths for mobile devices, in this case, a proper mobile browser and specific stylesheets will solve the deal.