css - 将 "wrapper"div 定位在固定导航栏下方？

Question

我已经开始在一个全新的网站上工作，并且我已经研究了一段时间的设计，但是我似乎遇到的一个问题是如何定位一个固定为滚动的全屏宽度的导航栏.在下面，我创建了一个名为“wrapper”的 div，它被设置为以 980px 的宽度居中。下面是代码示例；

<style>
    #navBar {
        background: RGB(0, 0, 0);
        height: 30px;
        position: fixed;
        width: 100%;
    }

    #wrapper {
        margin: 0 auto;
        width: 980px;
    }
</style>

<div id="navBar">

</div>

<div id="wrapper">
    <div style="border: 1px solid RGB(0, 0, 0); float: left; height: 500px; margin: 5px; width: 400px;"></div>
</div>

我在“wrapper”中创建的框应该(显然不是因为我在某处做错了什么)位于 navBar 下方的 5px，但是因为我已经使用 position: fixed 它位于它下面。谁能告诉我如何解决这个问题并让包装器直接位于导航栏下方而不是导航栏下方，同时保持其居中？

Answer 1

在 navbar 上设置 top:0 并在 wrapper div 上添加 30px margin-top

#navBar {
    background: RGB(0, 0, 0);
    height: 30px;
    position: fixed;
    width: 100%;
    top:0
}
#wrapper {
    margin: 30px auto 0;
    width: 980px;
}

http://jsfiddle.net/duncan/NkRxQ/