web-dev-qa-db-ja.com

固定ナビゲーションバーの下に「ラッパー」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を使用したためです代わりにその下に座っています。この問題を解決する方法を誰かに教えてもらえますか？それで、ラッパーがnavbarの下にではなく真下に配置され、中央に配置されたままになりますか？

cssnavigationwrapper
12
Banny

セットする top:0をnavbarに追加し、wrapper divに30pxのマージントップを追加します

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

15
Duncan Beattie

あなたの問題を解決するための完全なソリューション。

<!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
Rameshkrishnan S