当前位置: 首页 > 面试题库 >

在html中的位置固定标头

岳玉书
2023-03-14
问题内容

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

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

问题答案:

好!正如我现在看到的问题一样,我意识到由于标题的动态高度,我不想提及固定的边距值。

这是我在此类情况下一直使用的内容。

使用jQuery计算标头高度,并将其应用为顶部边距值。

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


 类似资料:
  • 问题内容: 好的,我注意到了一些东西,但是在CSS规范中找不到。样式化元素将相对于浏览器视口绝对定位。如果将固定位置的元素放置在另一个元素内会怎样?CSS示例如下: 和HTML: 据我所知,该元素相对于其最近的父元素也是固定位置的。这在所有浏览器中都可以使用吗?另外,它是错误还是故意行为? 到目前为止,我在互联网上没有找到关于此主题的任何内容,只是“固定位置使其固定在页面上”。 问题答案: 固定和

  • 问题内容: 是否可以在Mobile Safari中相对于视口定位固定的元素?正如许多人所指出的那样,这是行不通的,但是Gmail只是提供了几乎是我想要的解决方案-在邮件视图中查看浮动菜单栏。 在JavaScript中获取实时滚动事件也是一种合理的解决方案。 问题答案: iOS 5 支持position:fixed

  • 问题内容: 是否可以在Mobile Safari中相对于视口定位固定的元素?正如许多人所指出的那样,这是行不通的,但是Gmail只是提供了几乎是我想要的解决方案-请在邮件视图中查看浮动菜单栏。 在JavaScript中获取实时滚动事件也是一种合理的解决方案。 问题答案: 这个固定位置的div可以仅用两行代码来实现,该代码将div滚动移动到页面底部。

  • 本文向大家介绍js中的如何定位固定层的位置,包括了js中的如何定位固定层的位置的使用技巧和注意事项,需要的朋友参考一下 需要获取一些HTML的对象的坐标来更灵活的设置目标层的坐标,这里可以通过用到document.body.scrollTop等属性,但是这些属性在xhtml的标准网页中或更简单的说就是带<!DOCTYPE...>的标签中得到的值是0;如果不要此标签则一切正常,那么在xhtml中如何

  • 问题内容: 我想创建一个以动态宽度和高度为中心的弹出框。我曾经为此。没有它,则水平居中,但不能垂直居中。添加后,它甚至没有水平居中。 这是完整的设置: 如何使用CSS在屏幕上将此框居中? 问题答案: 基本上,您需要设置div 并将其居中放置在div的左上角。您还需要将和设置为div的高度和宽度的负一半,以将中心移到div的中间。 因此,在提供(标准模式)的情况下,此操作应: 或者,如果你不关心垂直

  • 问题内容: 是否有跨浏览器的CSS / JavaScript技术来显示较长的HTML表,以使列标题在屏幕上保持固定并且不随表主体滚动。考虑一下Microsoft Excel中的“冻结窗格”效果。 我希望能够滚动浏览表的内容,但始终能够看到顶部的列标题。 问题答案: 一段时间以来,我一直在寻找解决方案,但发现大多数答案都不起作用或不适合我的情况,因此我用jQuery写了一个简单的解决方案。 这是解决