CSS页眉和页脚正在放大放大

Question

我刚刚完成重新设计此网站（www.imustsolutions.co.za），并且当用户放大（FF中的Ctrl +）时，页眉和页脚出现问题。

这里的问题是： 页脚/头的背景色不画来填充屏幕（水平）当用户放大

我在做什么错的其余部分。？

这里再次网站：www.imustsolutions.co.za

在此先感谢。

问候， 中号

Answer 1

这基本上它是如何工作的。 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 2

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

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

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

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

#header {min-width:980px;}

Answer 3

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