如果容器不流动，则扩展标题背景

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居中并固定为1000px，＃header和#footer为1000px，＃content-left和＃content-right向左浮动，每个为500px。

如果容器已修复，如何将页眉和页脚背景颜色扩展到浏览器窗口的整个长度？

Answer 1

首先，改变你的html结构。
当你在那里时，为什么不使用html5作为页眉和页脚元素。

的 HTML

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

<强>的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/。