0

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

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

我已经尝试过以下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它是如何做到的，似乎我做得对，但它只适用于单个元素。当我尝试使用第二个元素时，它会超出第一个元素。

所以我的问题是，我该如何修复它，以便我将拥有一个全角黑色背景并在它下面设置一个全角灰色背景？

4

3 回答 3

1

你想把标志+导航栏放在黑色背景上吗？像这样：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; }
于 2013-11-06T22:10:30.167 回答
0

如果我了解您要正确执行的操作，则只需将容器内容（在本例中为您的导航）拉（负上边距）到跨越页面宽度的灰色背景中。

您需要应用负上边距的唯一元素是最后一个背景元素，在这种情况下它是#bg2- 您可以#bg1不使用负上边距，因为您不会尝试将内容“拉”入其中。

所以，你最终会得到这样的 CSS（使用你当前的标记）：

#bg1 {
    background: #000;
    width: 100%;
    height: 20px;
    border-bottom: 1px solid lime;
}
#bg2 {
    background: #ccc;
    width: 100%;
    height: 60px;
    margin-bottom: -60px; // This pulls the content below it into this space
    border-bottom: 1px solid cyan;
}

这是一个小提琴示例：http: //jsfiddle.net/jEYbP/3/

于 2013-11-06T22:07:32.443 回答
0

从您的 bg1 和 bg2 div 中删除负的底部边距。这样做会将下面的元素向上拉。

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

jsFiddle 示例

于 2013-11-06T21:59:24.700 回答