在html中定位固定标题

我有一个固定位置的标题（dynamic高度）。

我需要将容器div放在标题下方。 由于标题高度是dynamic的，所以我不能使用顶部边距的固定值。

如何才能做到这一点？

这是我的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

好！ 正如我现在看到我的问题，我意识到，由于标题的dynamic高度，我不想提及固定的保证金值。

这是我一直在使用这种情况。

使用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从页面的线性布局中删除元素，所以你需要设置“下一个”元素的上边距与标题的高度相同，或者（如果因为某种原因你不想这样做），放置一个占位符元素，占用页面stream中的空间，但会出现在标题出现的地方。

Answer 5

position :fixed与其他布局不同。 一旦fixed了header的position ，请记住，您必须设置content div的margin-top 。

Answer 6

将#container div设置为零

 #container{ top: 0; }