CSS 将“包装器”div 定位在固定导航栏下方？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16733641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Positioning a "wrapper" div underneath a fixed navigation bar?
提问by Banny
I've started work on a brand new site and i've been playing around with designs for a while, however one problem I seem to be having is regarding positioning a navigation bar with a full screen width that is fixed to scroll. Underneath i have created a divcalled "wrapper" which is set to centre at a width of 980px. Below is code example;
我已经开始在一个全新的网站上工作，并且我已经玩了一段时间的设计，但是我似乎遇到的一个问题是关于定位具有固定滚动的全屏宽度的导航栏。在下面，我创建了一个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>
The box i created within "wrapper" SHOULD (obviously isn't because i'm doing something wrong - somewhere) sit 5pxbelow the navBar, however because I have used position: fixedit sits underneath it instead. Could anybody lead me to how I solve this issue and have it so that the wrapper sits directly below rather than underneath the navbar whilst maintaining it's centering?
我“包装”应在创建的对话框（显然不是因为我做错了什么-某处）坐在5px下面的navBar，但因为我已经用position: fixed它位于它下面来代替。任何人都可以引导我解决这个问题，并让包装器直接位于导航栏下方而不是导航栏下方，同时保持其居中？
回答by Duncan Beattie
set top:0on your navbarand add 30px margin-top on your wrapperdiv
组top:0上你navbar，并添加上你的30像素的margin-top wrapperDIV
#navBar {
background: RGB(0, 0, 0);
height: 30px;
position: fixed;
width: 100%;
top:0
}
#wrapper {
margin: 30px auto 0;
width: 980px;
}
回答by Rameshkrishnan S
Complete solution to solve your problem.
完整的解决方案来解决您的问题。
<!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>
Starting brand new site should contain DOCTYPE and 0 margin for all tags. (Very helpful thing).
开始全新的网站应该包含所有标签的 DOCTYPE 和 0 边距。（非常有用的东西）。
