Question

我的页面尺寸为960px。但是，我想在页面顶部（标题）使用100%。

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

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

所以我的问题是，如何解决这个问题，这样我就会有一个全宽的黑色背景，并且它是一个全宽的灰色背景？

Answer 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; }

Answer 2

从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 example

Answer 3

如果我理解你要正确做的事情，你需要简单地将容器内容（在这种情况下是你的导航）拉（负上边距）到横跨页面宽度的灰色背景中。 / p>

您需要应用负上边距的唯一元素是最后一个背景元素，在这种情况下是#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/

如何创建全宽背景元素？

3 个答案: