CSS 页眉和页脚在放大时中断答案

【问题标题】：CSS Header and Footer are breaking on Zoom-inCSS 页眉和页脚在放大时中断
【发布时间】：2011-01-18 07:10:36
【问题描述】：

我刚刚完成了对这个网站的重新设计 (www.imustsolutions.co.za)，当用户放大时，页眉和页脚出现问题（Cntrl + in FF）。

问题来了：当用户放大时，页脚/页眉的背景颜色不会填满屏幕的其余部分（水平方向）。

我做错了什么？

又是这个网站：www.imustsolutions.co.za

提前致谢。

问候， M

【问题讨论】：

在完整和纯文本缩放中对我来说都很好。 FF3.6，Windows 7，1920 x 1080 像素。
1680 x 1050 , ff3.6 win7 也是 .. 工作正常 .. 不错的网站，也许在你的页脚上多做一些工作
在这里工作... FF 3.6 Vista - 1920x1200 像素
你确定它工作正常吗？我现在无法访问 FF3.6，但我可以在其他所有浏览器中看到它。但是，使用您使用的屏幕分辨率，您可能看不到它。您必须放大到出现水平滚动条。如果然后横向滚动，您会看到背景不会超出屏幕边缘。

【解决方案1】：

问题是标题的宽度设置为 100%（原始浏览器窗口的 100%），而您的主要内容设置为 980 像素。

因此，当您处于全尺寸模式时，100% 会大于 980 像素，但在调整大小或放大 100% 时会变得小于 980 像素，并且您的标题会中断，而主要内容会向右溢出，如果需要。

将页眉和页脚的最小宽度设置为与主要内容的宽度（加上填充和边距，如果有）相同的值通常足以解决此类问题。

关于您的网站，您的主要内容似乎设置为 980 像素，您可以尝试：

#header {min-width:980px;}

【讨论】：

【解决方案2】：

这基本上就是它应该如何工作的。 The width of a block-level element 由其包含块的宽度决定。而the width of the initial containing block（即html元素的包含块）具有“视口”（即浏览器窗口）的尺寸。

换句话说，除非您明确设置块的宽度以使其比视口宽，否则它们永远不会比视口宽。

您也可以在 StackOverflow 本身的页脚上看到同样的情况，例如：如果您放大此页面直到出现水平滚动条，然后横向滚动，您会看到灰色背景也被切掉了。

解决此问题的一种方法是将整个页面变为浮动，因为the width of floating elements 会缩小以适应其内容的尺寸，并且不受视口尺寸的限制。

只需将float: left 添加到html 或body 标记即可解决问题。不过，我还没有在所有浏览器中测试过。

【讨论】：

【解决方案3】：

您的页眉和页脚 DOM 元素应放置在主要内容中。所以你的标题 100% 将受到主要内容大小的限制：980px

【讨论】：