html - 使用 css 在所有页面上的菜单上设置水平栏

Question

我需要设计如下图所示的布局。

基本页面布局将有一个顶部横幅部分，以黑色显示，如果横幅是隐藏的，则会显示该部分。

接下来我需要用灰色填充页面背景，内容区域应该是白色。

我需要在导航/菜单上运行水平横幅，如下例所示。

我尝试过，但是 fiddle 上绿色的水平条没有显示与菜单对齐。如果我添加 margin-top:40px 它会在标题和横幅部分之间创建一个空格。我尝试使用 z-index 但也不起作用。

我非常感谢在这方面基于纯 CSS 和 div 容器的帮助。

演示

html, body {
    margin: 0;
    padding: 0
}
#contentWrapper {
    width: 500px;
    margin: 0 auto;
    background: #ccc;
    height: 300px;
    z-index:100;
    position:relative;
}
#BannerBar {
    height: 40px;
    background: blue;
}
#navBar {
    height: 20px;
    background: green;
    margin-top:30px;
}
#logowrapper
{
    height:40px;
    width:100%;padding:10px;
}
#NavigationWrapper
{
    width:100%;
    height:20px;
    background-color:green;
    text-align:center;
}
#footerBar {
    height: 40px;
    background: red;
}

<div id="BannerBar"></div>
<div id="navBar"></div>

<div id="contentWrapper">
    <div id="logowrapper">LOGO</div>
    <div id="NavigationWrapper">
        Home | About Us | News | Something
    </div>
</div>

<div id="footerBar"></div>

链接到fiddle

Answer 1

你的意思是这样吗？我添加了 position:absolute;、width:100%; 并将 margin-top 更改为 60px。查看演示

#navBar {
    height: 20px;
    background: green;
    margin-top:60px;
    position:absolute;
    width:100%;
}

<强> DEMO
要获得正确的背景，请将背景添加到灰色的正文中，并从 #contentWrapper

更改背景

html, body {
    ...
    background: #ccc;
}
#contentWrapper {
    ...
    background: #ffffff;
}

<强> DEMO(2)