HTML/CSS：問題全寬

請看看這個頁面： http://uploads.dennismadsen.com/fullwidth.html HTML/CSS：問題全寬

<!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" dir="ltr" lang="da-DK"> 
<head> 
    <title></title> 
</head> 
<body style="background-color:#e0e0e0;color:#fff;"> 

    <div style="position:absolute;width:100%;"> 
     <div style="background-color:#000;"> 
     <div style="width:800px;margin:0px auto;text-align:right;">Container width a width of 1500px</div> 
     </div> 
    </div> 
</body> 
</html>

內div有的800像素寬度，應該如果窗口比800像素更大的是水平居中。嘗試在小於800像素的瀏覽器窗口中查看頁面。例如寬度大約500px。當您向右滾動時，黑色背景沒有全寬。爲什麼？

來源

2011-09-02 dhrm

<div style="background-color:#000;">在<div style="position:absolute;width:100%;">之內，其寬度等於屏幕的寬度。所以，<div style="background-color:#000;">的寬度也等於屏幕的寬度。正如這個div設置黑色背景，背景寬度也等於屏幕寬度，而不是更多。所以它沒有延伸到正確的位置。

UPDATE

您可以只使用兩個div：

<div style="background-color:#000;"> 
    <div style="width:800px;margin:0px auto;text-align:right;">Container width a width of 1500px</div> 
</div>

對不起，也不管用。把它作爲一個非工作樣本留在這裏供參考。

更新2

而現在的工作變種：

<div style="background-color:#000;min-width:800px;width:100%"> 
    <div style="width:800px;margin:0px auto;text-align:right;">Container width a width of 800px</div> 
</div>

來源

2011-09-02 08:57:07

謝謝邁克爾:) – dhrm

這工作:)

<body style="background-color:#e0e0e0; color:#fff;"> 
    <div style="position:absolute; width:100%;"> 
     <div style="background:#000; width:800px; margin:0px auto; text-align:right;">Container width a width of 1500px</div> 
    </div> 
</body>

來源

2011-09-02 09:10:22

請看我的例子在這裏：http://uploads.dennismadsen.com/fullwidth2.html 它不工作。帶文字的容器只能有800px的寬度。但是無論窗戶的寬度如何，黑色背景都應該從左到右佔據洞空間。 – dhrm

查看我的更新回答 –

這是行不通的嗎？這隻適用於位於頂部的不是它，因爲由於沒有相對位置的div，所以絕對定位的div將自身與瀏覽器窗口關聯起來嗎？所以，如果他試圖把它放在頁面的中間，那麼它將不起作用......但我可能是錯的。 – Nathan

我不知道我完全理解這個問題，但我認爲你問的是將對象放在中心位置，而不會超過800像素。我會做的是做一個div容器，然後內部的div：

<div style="width:100%; min-width:800px; background-color:#000;"> 
    <div style="background-color:#fff; width:800px; margin:auto;"> 
    </div> 
</div>

隨着第一個div是綿延的屏幕的整個長度的容器，但沒有什麼比800像素越小，第二個div之中有問題的div，設置寬度爲800px，並將margin設置爲auto應該使它在容器div中居中。

來源

2011-09-02 12:38:09 Nathan

當然，你可以改變兩個div的背景顏色，比如說你不需要內部div的背景和黑色背景上的白色文本，你可以刪除內部div的背景顏色併爲文本添加一個樣式。 – Nathan

HTML/CSS：問題全寬

回答

相關問題