46

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

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

6 回答 6

63

你的#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/

于 2012-06-11T06:31:14.170 回答
7

好！当我现在看到我的问题时，我意识到由于标题的动态高度，我不想提及固定边距值。

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

使用 jQuery 计算标题高度并将其应用为上边距值。

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

演示

于 2016-09-12T09:07:36.680 回答
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;
}
于 2013-03-05T10:20:23.920 回答
2

我假设您的标题是固定的，因为即使用户向下滚动，您也希望它保持在页面顶部，但您不希望它覆盖容器。但是，设置position: fixed会从页面的线性布局中删除元素，因此您需要将“下一个”元素的上边距设置为与标题的高度相同，或者（如果出于某种原因您不这样做）想要这样做），放置一个占位符元素，它在页面流中占用空间，但会出现在标题显示的下方。

于 2012-06-11T06:32:45.813 回答
2

与position :fixed其他布局不同。一旦你fixed为position你的header，请记住你必须margin-top为contentdiv 设置。

于 2012-06-11T07:26:51.443 回答
0

将#container div顶部设置为零

#container{ 


 top: 0;



}
于 2012-06-11T10:25:20.830 回答