web-dev-qa-db-ja.com

htmlの位置固定ヘッダー

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

ヘッダーのすぐ下にコンテナ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>
jqueryhtmlcsshtml5css3
44
Sowmya

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

このようなシナリオで私が使用しているものは次のとおりです。

JQueryを使用してヘッダーの高さを計算し、上部マージン値として適用します。

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

デモ （

6
Sowmya

#containerは＃header-wrapの外側にある必要があります。その後、＃header-wrapの固定高さを指定してから、＃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/

56
micnic
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;
}
3
Sorter

ユーザーが下にスクロールしてもヘッダーがページの最上部に留まるようにしたいので、ヘッダーは固定されていると思いますが、コンテナーを覆うことは望ましくありません。 position: fixedを設定すると、ページの線形レイアウトから要素が削除されるため、「次の」要素の上余白をヘッダーの高さと同じに設定する必要があります。そうしたくない理由）、ページフローのスペースを占めるプレースホルダー要素を配置しますが、ヘッダーが表示される場所の下に表示されます。

2
nbrooks

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

2
RAN

#container div topをzeroに設定

#container{ 


 top: 0;



}
0
stay_hungry