在整個頁面上擴展背景圖片...不滾動導致它打破

我對網頁開發相當陌生，但是我在設計一些新的頁眉/頁腳時才意識到一些東西。當您將它們包裝在具有橫跨頁面的背景圖像/顏色的容器中時，然後將網頁的窗口縮小爲小於預期的寬度，然後滾動查看您無法看到的內容較小的窗口，背景圖像容器不再大（因爲它會自動調整窗口寬度，即使其中的內容溢出），並且您會看到空白而不是背景圖像。在整個頁面上擴展背景圖片...不滾動導致它打破

以主頁http://www.stumbleupon.com爲例。縮小窗口，然後向右滾動。突然所有的背景圖像都消失了。標題，正文，一切。只是在平坦，默認顏色的頂部內容。

有沒有解決方案？這只是在網頁設計中被忽略爲無關緊要的問題？這對我來說似乎相當重要，特別是在一次查看多個標籤頁/窗口，或者某人（上帝禁止）使用分辨率寬度小於1024的顯示器時。

來源

2011-08-24 Mit

StumbleUpon剛剛不小心貨櫃div s。他們已經設置了寬度爲100％的容器div，然後將內部的標題div設置爲100％。

<div id="container" style="width:100%"> 
    <div id="header" style="width:100%"> 
     Header Content 
    </div> 
</div>

容器div伸展到可見的窗口寬度。然後，子div僅延伸至該寬度。如果將標題放在容器div的外部，它將伸展到頁面的整個寬度。

<div id="header" style="width:100%"> 
     Header Content 
</div> 
<div id="container" style="width:100%"> 

</div>

有關全寬標題的示例，請參閱我的主頁：http://smallhadroncollider.com。

來源

2011-08-24 20:06:11

實際上，如果'div'是相對定位的，那麼默認情況下，您甚至不需要將其設置爲具有100％寬度。 –

我以你的網站爲例，刪除寬度尺寸，並確保一切都相對定位，但我不知道你的標題容器如何保持最小寬度960. 我有一個標題容器，一個標題div和一個情侶divs內的內容。標題容器具有相對定位，高度和背景設置。標題div具有相對位置，高度，寬度（960像素）和邊距0自動。但是，當我調整窗口大小時，標題div仍保持在960像素，而父div仍然調整爲小於960. – Mit

快速解決方案對我來說是最小寬度，但我知道我應該能夠避免使用它。 – Mit

在整個頁面上擴展背景圖片...不滾動導致它打破

回答

相關問題