我在一个页面上有两个 div。一个带有背景的网格容器和一个需要放置在另一个网格中心的内部网格。我的CSS：
html, body{
margin:0;
padding:0;
width:100%;
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
width:100%;
}
#grid{
width:1140px;
margin:0px auto;
}
此时，#grid-container 的背景图像仅填充窗口，而不是 html 的整个宽度。其症状是，如果缩小浏览器窗口以便需要水平滚动条并刷新页面，则背景图像会在浏览器窗口结束的地方结束。当我向右滚动时，背景图像不存在。有想法吗？
编辑：好的，根据请求，我已经编辑了我的 css/html。当我删除 #grid-container 中的宽度指定时，它会缩小到内部容器的宽度，这更糟糕。这是我现在所拥有的：
html, body{
margin:0;
padding:0;
min-width:1140px;
}
body{
background:url(../images/page-background.jpg) repeat-x top left !important;
height:100%;
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
padding-top:1px;
}
#grid-container2{
width:1140px;
margin:0px auto;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
和html：
<!DOCTYPE HTML>
<html>
<head>
---
</head>
<body>
...
<div id="grid-container" class="clearfix">
<div id="grid">..all kinds of things in here</div>
</div>
问题是由你造成的#grid有一个width:1140px.
你需要设置一个min-width:1140px on the body.
这将停止body变得小于#grid。消除width:100%因为块级元素默认占用可用宽度。实例：http://jsfiddle.net/tw16/LX8R3/ http://jsfiddle.net/tw16/LX8R3/
html, body{
margin:0;
padding:0;
min-width: 1140px; /* this is the important part*/
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
}
#grid{
width:1140px;
margin:0px auto;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
