小编典典

在html中的位置固定标头

css

我有一个固定位置的标头(动态高度)。

我需要将容器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>

阅读 242

收藏
2020-05-16

共1个答案

小编典典

好!正如我现在看到的问题一样,我意识到由于标题的动态高度,我不想提及固定的边距值。

这是我在此类情况下一直使用的内容。

使用jQuery计算标头高度,并将其应用为顶部边距值。

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