在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

嘛！正如我現在看到我的問題，我意識到我不想提及固定的保證金值，因爲標題的動態高度。

這是我一直在使用這種情況。

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

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

Demo

Answer 2

你的#container應該是＃頭包裹物之外，然後指定一個固定的高度＃報頭 - 換行後，請指定#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 3

我假設，因爲你想讓它留在頁面的頂部你的頭是固定的，即使用戶向下滾動，但你不想讓它覆蓋容器。但是，設置position: fixed會從頁面的線性佈局中刪除元素，因此您需要將「next」元素的頂部邊距設置爲與頭部的高度相同，或者（如果出於任何原因，不要這樣做），放一個佔位符元素佔用頁面流中的空間，但會出現在標題出現的地方。

Answer 4

position :fixed與其他佈局不同。 一旦你fixedposition爲你的header，請記住，你必須設置爲content div margin-top。

Answer 5

集的#container格頂部到零

#container{ 


top: 0; 



} 

Answer 6

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