「ラッパー」divを固定ナビゲーションバーの下に配置しますか？

私はまったく新しいサイトで作業を始めましたが、しばらくデザインで遊んでいましたが、スクロールするために固定されたフルスクリーン幅でナビゲーションバーを配置することに関する問題がありました。下に私は980pxの幅で中心に設定されている "ラッパー"と呼ばれるdivを作成しました。以下はコード例です。私は「ラッパー」内で作成「ラッパー」divを固定ナビゲーションバーの下に配置しますか？

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

ボックスが（私は何か間違ったことをやっているので、明らかではありません - どこかに）すべきである、私はそれではなく、その下に座っているposition: fixed使用していたがために、navBarの下5pxに座ります。誰でも私にこの問題を解決する方法を教えてもらえますか？そして、ラッパーは、それをセンタリングしながらnavbarの下ではなく下に直接置くようにしていますか？

出典

2013-05-24 Banny

私は、あなたのラッパーにnavbarの高さに等しい上限マージンを設定する必要があると思う... –

これはnavbarの下に座っているので、私はこれを試しても、それは30pxでnavbarをプッシュします。私は通常回避策を見つけ出すのが得意ですが、これは基本的なものですが、これは私に悩まされています。 – Banny

はあなたnavbarにtop:0を設定し、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/

出典

2013-05-24 11:18:25

Brill！トリックをやったようです:)これは、重複の点で「ポジション：固定」の問題に対する解決策ですか？また、私は自分のレイアウトを改善することができるかどうか、またはそれがどれほどのものであるべきかを見ることができる方法はありますか？ – Banny

私はこれを行いましたが、Experienceを実行すると、ナビゲーションバーにタイトルが表示されます。 – Janneman96

ナビゲーションバーの高さが動的な私と同様の状況（私は "ワードラップ：CSSの中にブレークワード"を置く）。ラッパーファイルで何を書くべきですか？ –

あなたの問題を解決するための完全なソリューションに30pxのマージントップを追加します。

<!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とすべてのタグの余白を含める必要があります。（非常に有用なもの）。

出典

2013-05-24 11:31:39

私はクリアが何のために使われているのか聞いてもよろしいですか？また、私が持っている問題は、私が作成したレイアウトを投げる新しい要素を作成するたびに、以下に示すソリューションを使用したことです。とにかく、他の要素の影響を受けないように永続的な修正を行うことができますか？私は問題を解決するためにすべての要素に 'float'スタイルの要素を使用しなければならないが、すべての項目を浮動させたくない。 – Banny

.clearを使用してラッパーdivを表示する。それ以外の場合は、1pxの高さになります。これは、float：wrapper divの内部divに対してleftを指定したためです。 –

私はいつでも、私はそれにフロートを適用する必要がある任意の要素を作成するか、単に私のレイアウトを破る – Banny

「ラッパー」divを固定ナビゲーションバーの下に配置しますか？

答えて

関連する問題