如何在整个页面上创建div跨度的背景

我现在正在网页上工作，我需要div的背景来覆盖整个页面（100％宽度）。如何在整个页面上创建div跨度的背景

我的问题是div的内容应该居中在一个950px div居中，div与背景放在一个950px宽的div内。

我无法弄清楚我应该如何让这个工作。有人可以帮我吗？

编辑：这是一个现场演示的网站，所以你可以理解我的困境。 http://tempohi.byethost14.com/仍在建设中，只在Firefox中测试过。

2010-08-29 Hultner

我不认为我理解。你能不能有一个宽度为100％的div，然后是另一个内嵌在950px宽的居中的div？ – 2010-08-29 16:43:02

我不确定你在找什么。是这样的吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <style> 
      .outerDiv { width:100%; background:#DEDEDE; } 
      .innerDiv { width:950px; margin:0 auto; border:solid 2px #000000; } 
     </style> 
    </head> 
    <body> 
     <div class="outerDiv"> 
      <div class="innerDiv"> 
       This is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test. 
      </div> 
     </div> 
    </body> 
</html>

来源

2010-08-29 17:12:29

我已替换“text-align：center;”在outerDiv中使用“margin：0 auto;”按照Pat的说法在innerDiv中。 – 2010-08-29 18:31:29

你可以使用这些技术之一this answer得到100％的宽背景图像。然后到中心内容的div，你只需要像这样：

<div style="margin: 0 auto; width: 950px;"> 
    Your content goes right m'ere 
</div>

什么上面所做的是创建一个950像素宽的分度，顶部和底部和auto利润保证金0px在左侧和右侧。这根据W3C visual formatting示范中心在其父块级元素：

如果两个“缘左”和 “保证金右”是“自动”，他们的使用值相等。这种水平方向使元素相对于包含块的边缘居中。

来源

2010-08-29 17:22:42 Pat

你说得对，“保证金：0汽车;”是一个更好的方法来做到这一点。我已经相应地修改了我的答案。 – 2010-08-29 18:27:37

没问题。需要记住的是该元素应该具有一个定义的宽度，并且它在IE5中不起作用（为此，您需要将它放在具有'text-align：center'的父容器中）。 – Pat 2010-08-29 18:42:34

如何在整个页面上创建div跨度的背景

回答

相关问题