Question

我已经开始在一个全新的网站上工作，我已经玩了一段时间的设计，但我似乎遇到的一个问题是关于定位一个全屏宽度的导航栏固定为滚动。在下面我创建了一个名为＆＃34;包装的div＆＃34;设置为宽度为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>

我在＆＃34;包装＆＃34;中创建的框应该（显然不是因为我做错了 - 在某个地方）5px位于navBar之下，但是因为我使用了position: fixed而是位于它下面。任何人都可以引导我解决这个问题并将其设置为使得包装器直接位于导航栏的下方而不是位于导航栏下方，同时保持其中心位置？

Answer 1

在top:0上设置navbar并在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/

Answer 2

解决问题的完整解决方案。

<!DOCTYPE html>
<html>
<head>
<style>
*{
    margin:0;
    padding:0;
}
#navBar {
    background: RGB(0, 0, 0);
    height: 30px;
    position: fixed;
    width: 100%;
    top: 0;
}
#wrapper {
    margin: 30px auto;
    width: 980px;
    background: #ccc;
}
.clear {
    clear: both;
}
</style>
</head>
<body>
<div id="navBar">

</div>

<div id="wrapper">
    <div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 400px;">
        <!-- You can create left side elements here (without any float specification in CSS) -->
    </div>
<div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 556px;">
        <!-- You can create right side elements here (without any float specification in CSS) -->
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

启动全新网站应包含所有标签的DOCTYPE和0保证金。（非常有用的东西）。

在固定导航栏下面放置一个“包装”div？

2 个答案: