Css 视口宽度导致背景未按预期显示
当视口缩小到小于为某些元素指定的大小时,我遇到了一个背景色异常的问题。虽然滚动条显示正确,但背景并非我所期望的。当视口与预期的一样大或更大时,背景的行为与预期的一样。当使用Firebug检查页面元素时,似乎Css 视口宽度导致背景未按预期显示,css,html,viewport,Css,Html,Viewport,当视口缩小到小于为某些元素指定的大小时,我遇到了一个背景色异常的问题。虽然滚动条显示正确,但背景并非我所期望的。当视口与预期的一样大或更大时,背景的行为与预期的一样。当使用Firebug检查页面元素时,似乎主体元素没有拉伸,即使其中的内容没有拉伸。是什么导致了背景的这种行为 我已经提供了我认为相关的html和CSS,但是如果我遗漏了什么,请告诉我 缩小视口示例 放大的视口示例 CSS html { background: #A37C45; } body { backgrou
主体
元素没有拉伸,即使其中的内容没有拉伸。是什么导致了背景的这种行为
我已经提供了我认为相关的html和CSS,但是如果我遗漏了什么,请告诉我
缩小视口示例
放大的视口示例
CSS
html
{
background: #A37C45;
}
body
{
background:
#55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}
#container
{
width: 100%;
}
#header
{
width: 730px;
margin-left: auto;
margin-right: auto;
padding: 5px;
overflow: hidden;
}
#main
{
width: 730px;
margin-top: 2px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#footer
{
background:
url("../images/backgrounds/grass.png") repeat-x scroll left top;
clear: both;
width: 100%;
overflow: hidden;
padding-top: 30px;
margin-top: 20px;
}
#footercontainer
{
width: 100%;
background-color: #A37C45;
margin-top: -1px;
}
#footercontent
{
width: 730px;
margin-left: auto;
margin-right: auto;
padding-bottom: 25px;
overflow: hidden;
}
HTML
<html>
<body>
<div id="container">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
<div id="footercontainer">
<div id="footercontent">
</div>
</div>
</div>
</body>
</html>
您之所以看到这种行为,是因为
宽度:100%
元素只将视口宽度作为它们需要渲染的背景量
您可以通过在主体
元素的CSS中添加一个来修复它。只需将其设置为嵌套元素的最大宽度:
body {
min-width: 730px;
background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}
IE中不支持最小宽度,因此请使用表达式
body {
min-width: 730px;
background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
/* IE Version */
width:expression(document.body.clientWidth < 730 ? "728px" : "auto" );
}
正文{
最小宽度:730px;
背景:#55688A url(“../images/backgrounds/ns_bg.gif”)重复-x滚动0;
/*IE版本*/
宽度:表达式(document.body.clientWidth<730?/728px):“auto”);
}
我还没有看到这在IE中不起作用。是否有我应该知道的特定版本?