Positioning a “wrapper” div underneath a fixed navigation bar?

问题

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 div called "wrapper" which is set to centre at a width of 980px. Below is code example;

<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 5px below the navBar, however because I have used position: fixed it 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?

回答1:

set top:0 on your navbar and add 30px margin-top on your 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/

回答2:

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).

来源：https://stackoverflow.com/questions/16733641/positioning-a-wrapper-div-underneath-a-fixed-navigation-bar

标签

css

navigation

wrapper