擴展頭背景如果容器不是流體

Question

比方說，我有一個這樣的標記：

<div id="container">  
    <div id="header">content</div> 
    <div id="left-column">content</div> 
    <div id="right-column">content</div> 
    <div id="footer">content</div> 
</div> 

的#container的集中和固定在1000像素，和的#header是#footer的1000像素，和＃內容左＃content-right左移，每個500px。

如果容器是固定的，如何將頁眉和頁腳的背景顏色擴展到瀏覽器窗口的全長？

Answer 1

首先，改變一點點你的HTML結構。
雖然你在那裏，爲什麼不使用HTML5頭和頁腳元素。

的Html

​​

的CSS
比，在CSS，頁眉和頁腳的寬度設置爲100％，讓你想讓他們去的顏色。 在這個例子中紅色。比使用類.container將使內容無論你把它放在哪裏（標題，主要部分，頁腳）在屏幕中間顯示，但沒有任何背景顏色。

header, footer{display:block; width:100%; background:#ff000; margin:0; padding:0;} 
.container{width:1000px; margin:0 auto;} 

希望這有助於:)

Answer 2

頁眉和頁腳div需要在容器div之外。 將背景顏色應用於頁眉/頁腳周圍的包裝。

HTML

<div id="header-wrapper"> 
    <div id="header">content</div> 
</div> 
<div id="container"> 
    <div id="left-column">content</div> 
    <div id="right-column">content</div> 
</div> 
<div id="footer-wrapper"> 
    <div id="footer">content</div> 
</div> 

CSS

#header-wrapper{width:100%;height:xxx;background:#3399ff} 
#header,#footer{width:1000px;margin:0 auto} 

Answer 3

接受的答案是真的做到這一點壞的方式。 HTML用於內容的語義含義。 從容器中刪除標題不是語義！這樣做還有一個更好的方法，它仍然保留語義內容：http://css-tricks.com/full-browser-width-bars/。