我的 body 有平铺背景(附图中的蓝色)
我需要将一些固定宽度和高度的内容(绿色)水平居中，与页面顶部的距离固定。
然后我需要将居中内容的背景图像继续到页面的左右两端，无论浏览器有多宽(紫色)
这是因为绿色内容中有一个“洞”，可以让 body 背景显示出来。如果这不是要求 id，请将紫色设置为 100% 宽度的 div 来包裹内容，并简单地为其提供平铺背景图像。
到目前为止我已经做到了:
<div id="Left"></div>
<div id="Right"></div>
<div id="Content"></div>
#Left
{
width: 50%;
margin-right: 480px;
position: absolute;
top: 50px;
right: 50%;
height: 525px;
background: transparent url(/images/purple.png) repeat-x scroll center top;
}
#Right
{
width: 50%;
margin-left: 480px;
position: absolute;
top: 50px;
left: 50%;
height: 525px;
background: transparent url(/images/purple.png) repeat-x scroll center top;
}
#Content
{
position: absolute;
top: 50px;
left: 50%;
margin-left: -480px;
width: 960px;
height: 525px;
background: transparent url(/images/green.png) no-repeat scroll center top;
}
这确实有效，除了页面有一个水平滚动条，右边的紫色部分延伸了某种方式。我怎样才能克服这个问题？
我不能通过简单地复制背景来欺骗这个漏洞，我想避免在主体上放置 overflow-x: hidden。
编辑:我还需要一个可变高度的页面，因为给定的 525px 高度 可能要大得多，因此页面需要垂直滚动。
这需要在 IE7+、FF、Safari 中工作
谢谢
最佳答案
我认为这应该可以解决问题:
<html>
<head>
<style type="text/css">
body
{
overflow-x: hidden;
width: 100%;
margin: 0;
padding: 0;
}
#Left
{
width: 50%;
margin-right: 480px;
position: absolute;
top: 50px;
right: 50%;
height: 5525px;
border: solid 2px purple;
}
#Right
{
width: 50%;
margin-left: 480px;
position: absolute;
top: 50px;
left: 50%;
height: 5525px;
border: solid 2px purple;
}
#Content
{
position: absolute;
top: 50px;
left: 50%;
margin-left: -480px;
width: 960px;
height: 5525px;
border: solid 2px green;
}
</style>
</head>
<body>
<div id="Left"></div>
<div id="Right"></div>
<div id="Content"></div>
</body>
</html>
我向 body 标签添加了样式(以防止出现水平滚动条)，并且我在 Content div 上使用了“auto”边距(不确定是否有必要，但我就是这样做的)。
如果我遗漏了什么，请告诉我。
编辑:
我将绝对定位放回到内容 div 上。 GD 你的 Internet Explorer...
关于css - 棘手的CSS定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3523309/