jquery - 在html中定位固定标题

标签 jquery html css

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

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

最佳答案

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

关于jquery - 在html中定位固定标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10975268/

相关文章:

javascript - 自定义 jQuery 选择器返回所有元素的匹配项

html - 当包裹在另一个元素中时,某些元素的不同样式

jquery - 删除图标及其功能

html - 在一个 HTML 元素中有很多类是不是很糟糕?

html - href to asd#zxc.txt(文件名包含数字符号),目标为 ="_blank"for IE

php - 如何将 php 输出行保持在一行中

jquery - 点击切换div颜色

php - 使用按钮编写交互式 PHP

jquery - 在 jquery 中添加 span 标签不显示

javascript - 带有两个参数的 JS 函数,引用不同的对象