如何将“包装器”div定位在固定导航栏下方？

Question

如何将“包装器”div定位在固定导航栏下方？

13

我已经开始了一个全新网站的工作，一段时间以来一直在尝试设计。然而，我遇到的一个问题是如何定位一个宽度为整个屏幕且固定滚动的导航栏。在下面，我创建了一个名为“wrapper”的

元素，并将其设置为宽度为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下方5像素，但是因为我使用了position: fixed，它实际上是在导航栏下面。有没有人可以告诉我如何解决这个问题，并使其保持居中而直接放置在导航栏下面？

- Banny

我认为你需要将wrapper的顶部边距设置为与导航栏高度相等... - Laurent S.

我确实尝试过这个，但是由于它位于导航栏下方，它也将导航栏向下推动30像素。我通常很擅长找到解决方法，但像这样基本的问题让我束手无策。 - Banny

2个回答

1

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

<!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边距。（非常有帮助的事情）。

- Rameshkrishnan S

我可以问一下clear的用途吗？另外，我遇到的一个问题是，我使用了下面提供的解决方案，但每次创建新元素时，它都会破坏我创建的布局。有没有办法创建某种永久性修复程序，使其不受任何其他元素的影响？我必须在每个元素上使用float样式来解决这个问题，但我不想浮动每个项目。 - Banny

.clear 用于使包装 div 显示。否则，由于您为包装 div 的内部 div 指定了 float: left，它将只有 1px 高度。 - Rameshkrishnan S

我的意思是，无论我创建任何元素，都必须对其应用浮动，否则它会破坏我的布局。 - Banny

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Duncan Beattie · Accepted Answer

在您的 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/