css - CSS Sticky Footer 的水平溢出问题

Question

查看http://www.cssstickyfooter.com/并将浏览器窗口的大小调整为 < 600px。

注意当内容溢出超出其宽度时，页眉和页脚元素是如何不足的。

有什么办法可以防止这种情况发生，这样当页面水平滚动时，页眉和页脚就不会不足？

Answer 1

可以通过为不与文档其余部分一起拉伸的元素分配最小宽度来解决此问题。

在示例站点的 DOM 检查器中，尝试添加：

min-width: 960px;

...到页眉和页脚。问题解决了！我已经在所有浏览器和设备上使用了很多次，效果很好。

Answer 2

您看到的是使窗口比 .main、.foot 和其他具有静态宽度的布局元素更窄的副作用。如果它们没有宽度或更小的宽度，它就可以正常工作。

Answer 3

没有人真正使用宽度小于 600 像素的浏览器。即使是 800x600px 对于大多数人来说都快死了，看看这个调查结果：http ://www.w3schools.com/browsers/browsers_display.asp

您应该只担心移动设备较小页面宽度的水平溢出和其他问题，在这种情况下，适当的移动浏览器和特定的样式表将解决问题。