位置固定头在html [英] position fixed header in html

问题描述

我有一个固定位置的标题。

在标题后面开始的容器div应该在标题正下方开始，而不会给出任何填充/边距。

  
 >＃header-wrap {
 position：fixed; 
 height：auto; 
 width：100％; 
 z-index：100 
} 
 #container {
 / *需要编写css在固定标题下面启动这个div，而不提及顶部边距/ 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 =＃>给我< br />测试< / a>< / li> 
< li>< a href =＃>我的< br />测试2< / a>< / li> 
< li>< a href =＃>测试4< / a>< / li> 
< / ul> 
< / div> 
< div class =clear> 
< / div> 
< / div> 
< / div><！ - 标题结尾 - > 
 
< div id =container> 
< / div> 
  

解决方案

当我看到我的问题，我意识到，我不想提到固定利润率值，因为标题的动态高度。

这是我一直在使用

使用jQuery计算标题高度，并将其作为顶部边距值。

  var divHeight = $（'＃header-wrap'）。height（）; 
 $（'＃container'）。css（'margin-top'，divHeight +'px'）; 
  

演示

I have a header with a fixed position.

The container div which starts after the header should start exactly below the header without giving any to padding/margin.

How can this be done?

Here's my 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*/
}

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

解决方案

Well! As I saw my question now, I realized that I didn't want to mention fixed margin value because of the dynamic height of header.

Here is what I have been using for such scenarios.

Calculate the header height using jQuery and apply that as a top margin value.

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

Demo

这篇关于位置固定头在html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！