我刚刚完成了对这个网站（www.imustsolutions.co.za）的重新设计，当用户放大时，页眉和页脚出现问题（Cntrl + in FF）。
这是问题所在：当用户放大时，页脚/页眉的背景颜色不会填充屏幕的其余部分（水平方向）。
我究竟做错了什么？
这里又是这个网站：www.imustsolutions.co.za
提前致谢。
问候，米
问问题
4579 次
3 回答
3
问题是标题的宽度设置为 100%（原始浏览器窗口的 100%），而您的主要内容设置为 980px。
因此，当您处于全尺寸模式时，100% 将大于 980 像素，但在调整大小或放大 100% 时将变得小于 980 像素，并且您的标题会中断，而主要内容会向右溢出，如果需要的话。
将页眉和页脚的最小宽度设置为与主要内容的宽度（加上填充和边距，如果有）相同的值通常足以解决此类问题。
关于您的网站，您的主要内容似乎设置为 980px，您可以尝试：
#header {min-width:980px;}
于 2012-05-22T14:04:00.327 回答
1
这基本上就是它应该如何工作的。块级元素的宽度由其包含块的宽度决定。并且初始包含块（即元素的包含块）的宽度html具有“视口”（即浏览器窗口）的尺寸。
换句话说，除非您明确设置块的宽度以使其比视口更宽，否则它们永远不会比视口更宽。
你也可以在 StackOverflow 本身的页脚看到同样的事情，例如：如果你放大这个页面直到你得到一个水平滚动条然后横向滚动，你会看到灰色背景也被切掉了。
解决此问题的一种方法是将整个页面变为浮动，因为浮动元素的宽度会缩小以适应其内容的尺寸，并且不受视口尺寸的限制。
只需添加float: left到htmlorbody标签就可以了。不过，我还没有在所有浏览器中测试过。
于 2010-02-18T14:58:18.427 回答
0
您的页眉和页脚 DOM 元素应放置在主要内容中。所以你的标题 100% 将受到主要内容大小的限制：980px
于 2013-01-24T06:59:47.457 回答