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


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

我在“包装器”中创建的盒子应该(显然不是因为我做错了什么 - 某处)坐着 5px 以下 navBar但是因为我已经习惯了 position: fixed 它坐在它下面。任何人都可以引导我解决这个问题并将其设置为使得包装器直接位于导航栏的下方而不是位于导航栏的下方,同时保持其中心位置?


3437
2018-05-24 11:11


起源

我认为你需要为你的包装器设置一个等于导航栏高度的上边距... - Laurent S.
我确实试过这个,因为它位于导航栏下面,它也将导航栏向下推了30px。我通常擅长找到解决方法但是基本的东西让我难过。 - Banny


答案:


top:0 在你的 navbar 并在你的上加30px margin-top wrapper DIV

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


14
2018-05-24 11:18



布里尔!似乎已经完成了诀窍:)这是任何解决方案 position: fixed 重叠方面的问题?还有什么方法你可以看到我可以改善我的布局或它几乎应该如何? - Banny
我做了这个,但是如果我确实<a href="#experience">经验</a>,导航栏将涵盖标题。 - Janneman96
与我类似的情况,导航栏的高度是动态的(我把“word-wrap:break-word”放在css中)。我应该在包装文件中写什么? - Nani Kalyan


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

<!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保证金。 (非常有用的东西)。


1
2018-05-24 11:31



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