如何在整個頁面上創建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跨度的背景

回答

相關問題