在html中定位固定标题

Posted 2023-03-06

【中文标题】在html中定位固定标题

【英文标题】：position fixed header in html

【发布时间】：2012-06-14 01:44:35

【问题描述】：

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

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

【问题讨论】：

固定标题不是布局的一部分。它是漂浮的。你需要给内容一个margin-top，这样它就好像标题在那里一样。

阅读此css-tricks.com/…

CSS-Only Scrollable Table with fixed headers的可能重复

【参考方案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/

【讨论】：

是的，它在外面。但我无法修复页边距顶部，因为标题中的内容因页面而异

你知道css位置是做什么的吗？他想要一个相对于显示器的固定元素

避免要求 javascript 测量和调整页边距的一种方法是复制页眉中的内容。将一份副本放在“可见性：隐藏”样式的 div 中，该 div 仍然是页面的一部分，另一份作为“位置：固定”。

这是真正的答案，James :) 谢谢。然而，在某些情况下，它可能很难复制，而且它也可能不会以相同的方式调整大小，所以还是有点风险

当问题指定动态高度时，如何将其视为有效答案？这个答案假设一个固定的高度。

【参考方案2】：

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

这是我在此类场景中一直使用的。

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

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

Demo

【参考方案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;

【参考方案4】：

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

【参考方案5】：

position :fixed 与其他布局不同。 将fixed position 设置为header 后，请记住，您必须为content div 设置margin-top。

【参考方案6】：

将#container div top设置为零

#container 


 top: 0;