在固定导航栏下方定位“包装”div？答案

【问题标题】：Positioning a "wrapper" div underneath a fixed navigation bar?在固定导航栏下方定位“包装”div？
【发布时间】：2013-05-19 23:26:17
【问题描述】：

我已经开始在一个全新的网站上工作，并且一直在玩设计，但是我似乎遇到的一个问题是关于定位一个固定为滚动的全屏宽度的导航栏.在下面，我创建了一个名为“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>

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

【问题讨论】：

我认为您需要将包装器的上边距设置为等于导航栏高度...
我确实尝试过这个，但是因为它位于导航栏下方，它也会将导航栏向下推 30 像素。我通常很擅长寻找解决方法，但像这样基本的东西让我很难过。

标签： css navigation wrapper

【解决方案1】：

在 navbar 上设置 top:0 并在 wrapper div 上添加 30px 边距

#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/

【讨论】：

太棒了！似乎已经成功了 :) 这是任何position: fixed 重叠问题的解决方案吗？还有什么方法可以让你看到我可以改进我的布局，或者它应该是怎样的？
我这样做了，但是如果我这样做 Experience，导航栏会覆盖标题。
与我类似的情况是导航栏的高度是动态的（我在 css 中放置了“word-wrap: break-word”）。我应该在包装文件中写什么？
如果我的导航栏高度是动态的，取决于滚动怎么办？

【解决方案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 边距。（非常有帮助的东西）。

【讨论】：

请问clear是干什么用的？我遇到的另一个问题是我使用了下面提供的解决方案，但是每次我创建一个新元素时，它只会抛出我创建的布局。无论如何我可以创建某种形式的永久修复以使其不受任何其他元素的影响？我必须在每个元素上使用 float 样式元素来解决问题，但是我不想浮动每个项目
.clear 用于使包装器 div 出现。否则它将在 1px 高度，因为您指定了 float: left 用于包装 div 的内部 div。
我的意思是每当我创建任何元素时，我都必须对其应用浮动，否则它只会破坏我的布局