46

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

コンテナ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>
4

6 に答える 6

7

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

これが、私がそのようなシナリオに使用してきたものです。

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

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

デモ

于 2016-09-12T09:07:36.680 に答える
3 
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;
}
于 2013-03-05T10:20:23.920 に答える
2

は他のposition :fixedレイアウトとは異なります。あなたがあなたfixedのpositionためになったら、あなたはdivのためにheaderを設定しなければならないことを覚えておいてください。margin-topcontent

于 2012-06-11T07:26:51.443 に答える
2

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

于 2012-06-11T06:32:45.813 に答える
0

#container divのトップをゼロに設定

#container{ 


 top: 0;



}
于 2012-06-11T10:25:20.830 に答える