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

Question

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

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

我究竟做错了什么？

这是该网站：www.imustsolutions.co.za

提前致谢。

问候，M

Answer 1

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

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

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

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

#header {min-width:980px;}

Answer 2

这基本上是它应该如何工作的。 块级元素的宽度由其包含块的宽度确定。 并且初始包含块的宽度 （即html元素的包含块）具有“视口”（即浏览器窗口）的尺寸。

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

您也可以在StackOverflow本身的页脚上看到同样的事情，例如：如果您放大此页面，直到获得水平滚动条然后向侧面滚动，您将看到灰色背景也被切断。

解决此问题的一种方法是将整个页面转换为浮动，因为浮动元素的宽度会缩小以适合其内容的尺寸，并且不受视口尺寸的限制。

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

Answer 3

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