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

前端 未结 2 855
一个人的身影
一个人的身影 2020-12-16 16:51

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

相关标签:
2条回答
  • 2020-12-16 17:49

    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/

    0 讨论(0)
  • 2020-12-16 17:52

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

    0 讨论(0)
提交回复
热议问题