問題描述

我已經開始在一個全新的網站上工作，并且一直在玩設計，但是我似乎遇到的一個問題是關于定位一個固定為滾動的全屏寬度的導航欄.下面我創建了一個名為wrapper"的 div，它被設置為以 980px 的寬度居中.下面是代碼示例；

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>

我在包裝器"中創建的框應該(顯然不是因為我做錯了什么——某處)位于 navBar 下方的 5px，但是因為我已使用 position: fixed 它位于其下方.任何人都可以指導我如何解決這個問題并讓包裝器直接位于導航欄下方而不是導航欄下方，同時保持其居中?

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?

推薦答案

在 navbar 上設置 top:0 并在 wrapper 上添加 30px margin-top 分區

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/

這篇關于定位“包裝器"固定導航欄下的div?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！