htmlの位置固定ヘッダー

Question

固定位置のヘッダー（動的高さ）があります。

ヘッダーのすぐ下にコンテナdivを配置する必要があります。ヘッダーの高さは動的なので、固定値を上余白に使用することはできません。

どうすればいいですか？

ここに私のCSSです：

#header-wrap { 
    position: fixed; 
    height: auto; 
    width: 100%; 
    z-index: 100 
} 
#container{ 
    /*Need to write css to start this div below the fixed header without mentioning top margin/paading*/ 
} 

...とHTML：

<div id="header-wrap"> 
    <div id="header"> 
    <div id="menu"> 
     <ul> 
     <li><a href="#" class="active">test 0</a></li> 
     <li><a href="#">Give Me <br />test</a></li> 
     <li><a href="#">My <br />test 2</a></li> 
     <li><a href="#">test 4</a></li> 
     </ul> 
    </div> 
    <div class="clear"> 
    </div> 
    </div> 
</div><!-- End of header --> 

<div id="container"> 
</div> 

Answer 1

まあへ！今私の質問を見て、私はヘッダーの動的な高さのために固定マージン値は言及したくないことに気付きました。

ここでは、このようなシナリオで私が使用しているものを示します。

jQueryを使用してヘッダーの高さを計算し、それを上余白の値として適用します。

var divHeight = $('#header-wrap').height(); 
$('#container').css('margin-top', divHeight+'px'); 

Demo

Answer 2

あなた#containerは＃header-のための固定の高さを指定し、その後、＃ヘッダラップの外にする必要があります折り返し、＃header-wrapの高さに等しい#containerのmargin-topを指定します。このような何か：

#header-wrap { 
    position: fixed; 
    height: 200px; 
    top: 0; 
    width: 100%; 
    z-index: 100; 
} 
#container{ 
    margin-top: 200px; 
} 

希望、これは何が必要です：あなたが場合でも、ユーザーがスクロールダウンし、それがページの上部に滞在したいので、私はあなたのヘッダが固定されていると仮定し http://jsfiddle.net/KTgrS/

Answer 3

が、あなたはコンテナをカバーしたくない。しかし、position: fixedは、ページの線形レイアウトから要素を削除するので、 "next"要素の上マージンをヘッダーの高さと同じにするか、（何らかの理由で 'それをやりたがっている）、ページフローにスペースを占めるプレースホルダ要素を配置しますが、ヘッダーが表示される場所の下に表示されます。

Answer 4

position :fixedは、他のレイアウトと異なります。 headerのfixedpositionになったら、contentのdivにmargin-topを設定する必要があることに注意してください。

Answer 5

セット#containerのdivのトップゼロ

#container{ 


top: 0; 



} 

Answer 6

body{ 
    margin:0; 
    padding:0 0 0 0; 
} 
div#header{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:25; 
} 
@media screen{ 
body>div#header{ 
    position: fixed; 
} 
} 
* html body{ 
    overflow:hidden; 
} 
* html div#content{ 
    height:100%; 
    overflow:auto; 
}