html - 如何创建全宽背景元素？

Question

我的页面大小是 960px。但是，我希望我的页面顶部有两个背景(用于标题)，它们将使用 100%。

全宽黑色背景，下面是全宽灰色背景。

I've tried the following ^jsFiddle

<header id="bg1"></header>
<header id="bg2"></header>

<section id="page">
    <header id="page-header">
        <div>
            <nav>
                <a href="#">Home</a>
                <a href="#">About</a>
            </nav>
            <h2>SiteLogo</h2>
        </div>
    </header>
</section>

bg1 应该是黑色背景，bg2 应该是灰色背景。

#bg1 {
    background: #000;
    width: 100%;
    height: 60px;
    margin-bottom: -60px;
    border-bottom: 1px solid lime;
}
#bg2 {
    background: #ccc;
    width: 100%;
    height: 20px;
    margin-bottom: -20px;
    border-bottom: 1px solid cyan;
}

#page-header {height: 60px;}
#page{margin:0 auto;width: 360px;} /* 960px */

body {color: #fff}
nav { float: right; }
nav a { color: #fff; }

我实际上检查了 Stack Overflow 是如何做到的，看起来我做得对，但它只适用于单个元素。当我尝试使用第二个元素时，它会超出第一个元素。

所以我的问题是，我怎样才能修复它，使我拥有一个全 Angular 黑色背景，并在它下方有一个全 Angular 灰色背景？

Answer 1

是否要将 Logo + 导航栏放在黑色背景上？像这样:http://jsfiddle.net/jEYbP/6/

#bg1 {
    background: #000;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid lime;
}
#bg2 {
    background: #ccc;
    width: 100%;
    height: 20px;
    margin-bottom: -20px;
    border-bottom: 1px solid cyan;
}

#page-header {height: 60px;}
#page{margin:-80px auto 0;width: 360px;} /* 960px */

body {color: #fff}
nav { float: right; }
nav a { color: #fff; }