橫跨整個頁面的拉伸元素，無論縮放/查看

我正在製作一個網頁，該網頁的頭部一直延伸到整個網頁，就像此網站和其他SE網站上的標題欄一樣。在測試不同分辨率和瀏覽器尺寸的CSS時，我注意到如果瀏覽器小於頁面尺寸，元素將只填充用戶的瀏覽器。例如，如果瀏覽器窗口小於960像素寬（我網站主容器的寬度）並出現水平滾動條，則標題只會填滿屏幕上當前的空間，並且不會伸展到其餘部分可通過滾動條訪問的頁面。橫跨整個頁面的拉伸元素，無論縮放/查看

事實證明，我不是唯一一個患有這個問題的人：StackOverflow和其他SE網站有同樣的問題。

enter image description here

我能做些什麼來解決這個問題？

來源

2012-02-25 Sonic42

在這可能是一種風格的選擇。如果你有螢火蟲，你可以在'＃header'樣式中找到'width：960px'並將其禁用，使標題在整個頁面上延伸。我的意思是：在頁面上放置東西很容易，所以我不確定你確切的問題是什麼。也許如果你有一些html代碼或示例顯示你的特定問題，我們可以幫助你更好一點？ – Jeroen 2012-02-25 00:42:11

訣竅是將元素設置爲100％寬度，幷包含與最寬的網站元素一樣寬的最小寬度。

看看下面的例子：

<div id="header"> 
    <!-- Exciting header links --> 
</div> 

<div id="content"> 
    <!-- Content that will be at most 1000px wide --> 
</div>

你使用的CSS是：

#header { 
    width: 100%; 
    min-width: 1000px; 
}

這工作，因爲當標題會一直佔用100％的可用空間和的至少寬1000px。這可以防止寬內容生成的水平滾動條看起來像標題結尾太早。

來源

2012-02-25 00:50:01 Pat

橫跨整個頁面的拉伸元素，無論縮放/查看

回答

相關問題