CSS页眉和页脚在放大时打破

Question

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

问题在于： 当用户放大时，页脚/标题的背景颜色不会绘制以填充屏幕的其余部分（水平）。

我做错了什么？

以下是该网站：www.imustsolutions.co.za

提前致谢。

此致 中号

Answer 1

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

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

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

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

#header {min-width:980px;}

Answer 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标记即可。不过，我没有在所有浏览器中测试过它。

Answer 3

您的页眉和页脚DOM元素应放在主要内容中。因此，您的标题100％将受限于主要内容大小：980px