在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

你的#container應該在＃header-wrap之外，然后為＃header-wrap指定一個固定的高度，之后，為#container指定margin-top等於＃header-wrap的高度。 像這樣的東西：

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

希望這是你需要的： http ： //jsfiddle.net/KTgrS/

Answer 2

好！ 正如我現在看到的問題，我意識到由於標題的動態高度，我不想提及固定邊距值。

以下是我一直用於此類場景的內容。

使用jQuery計算標題高度並將其應用為頂部邊距值。

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

演示

Answer 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;
}

Answer 4

我認為你的標題是固定的，因為你希望它保持在頁面的頂部，即使用戶向下滾動，但你不希望它覆蓋容器。 設置position: fixed會從頁面的線性布局中刪除元素，因此您需要將“next”元素的上邊距設置為與標題的高度相同，或者（如果出於任何原因，您不想這樣做），放一個占位符元素占用頁面流中的空格，但會出現在標題顯示的下方。

Answer 5

position :fixed與其他布局不同。 fixed header的position ，請記住必須為content div設置margin-top 。

Answer 6

將#container div top設置為零

#container{ 


 top: 0;



}