如何製作具有全寬頭和固定寬度主體的響應式網頁佈局

我遇到了一個我曾經見過的問題，出現在幾個不同的網站中，我從來沒有找到解決方案。我注意到許多其他人也遇到了類似的問題，但是我所看到的每一個修復都不適用於我目前正在使用的網站。基本上我試圖做的是具有響應式佈局，頭部具有重複背景，跨越整個窗口和具有固定寬度的主體。基本HTML看起來像這樣：如何製作具有全寬頭和固定寬度主體的響應式網頁佈局

<html> 
<body> 
    <div id="header">Header content</div> 
    <div id="main-content">Main content here</div> 
</body> 
</html>

和CSS是這樣的：

html, body{ 
     width:100%; 
} 
#header{ 
     width:100%; 
} 
#main-content{ 
     width:1000px; 
}

此代碼並不意味着代表的究竟是我工作的網站上，但讓你知道我們正在努力做什麼。要查看實際的html，css等，請轉至http://236887.site-show.com/並查看它。該網站最初看起來不錯，但如果您縮小窗口的大小，以便有一個水平滾動條，然後滾動到右側並查看標題，您會看到重複背景不會達到全寬。

我發現的一件事是，刪除主內容的寬度：1000px確實解決了這個問題。但是，我們需要將該主要內容區域設置爲該寬度。我也嘗試設置溢出隱藏和設置標題上的浮動，但似乎沒有任何更正問題。

這對於在平板電腦，智能手機等上運行的Android/iOS系統尤其是一個問題。任何幫助，你可以給我這個問題將不勝感激。

來源

2013-01-08 Derekc

的問題是，你主要內容格設置爲1000像素（與30PX水平填充），而你的CSS文件指定你的頭是960像素。增加標題的寬度以匹配您的內容可以解決問題。

下面是修復代碼：

.grid-50-50 { 
    display: table; 
    width: 1030px; 
}

來源

2013-01-08 19:04:05 jmeas

好傢伙！你搖滾！這完全解決了我的問題。謝謝！ – Derekc

沒問題，德里克。如果你認爲它回答了這個問題，你應該[接受答案]（http://meta.stackexchange.com/a/5235）！ – jmeas

@Derekc這是一個稍微複雜的問題。與此問題相同的問題可以修復，但還有其他問題。爲了解決這個問題，你可以看到*＃content * div的寬度爲* 1114px *，而你的body * min-width *只設置爲* 960px。*將它改爲* 1114px *很好去。但是，您會看到您的頁腳仍然不太理想。您的HTML和CSS可能會導致此問題的其他結構性問題。 – jmeas

如果您在HTML5這樣做，我建議使用100％<header>標籤，然後添加一個100％的div「包裝」 ......這個可以有更靈活。

但對於這個......如果你不」要編輯的頭然後設定分鐘1030px你身體標記：

body {min-width: 1030px;}

來源

2013-01-08 19:24:33 Riskbreaker

感謝您的建議。我寧願使用

標籤，但還有其他原因，爲什麼我們不使用這些標籤。我最終使用jmeas的這個網站的答案，但我確實使用你的另一個網站與頁腳有類似的問題。感謝您的洞察力。 – Derekc

偉大的快樂編碼 – Riskbreaker

如何製作具有全寬頭和固定寬度主體的響應式網頁佈局

回答

相關問題