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

固定页眉在页定位中重叠

庞阳波
2023-03-14
问题内容

如果我在HTML页面中有一个非滚动标题,该标题固定在顶部并具有定义的高度:

有没有一种方法可以使用URL锚点(该#fragment部分)使浏览器滚动到页面中的某个点,但是在 没有JavaScript的帮助下
仍然可以尊重固定元素的高度?

http://foo.com/#bar
WRONG (but the common behavior):         CORRECT:
+---------------------------------+      +---------------------------------+
| BAR///////////////////// header |      | //////////////////////// header |
+---------------------------------+      +---------------------------------+
| Here is the rest of the Text    |      | BAR                             |
| ...                             |      |                                 |
| ...                             |      | Here is the rest of the Text    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+

问题答案:

我有同样的问题。我通过将一个类添加到锚元素(顶部栏高度为padding-top值)来解决此问题。

<h1><a class="anchor" name="barlink">Bar</a></h1>

然后简单的CSS:

.anchor { padding-top: 90px; }


 类似资料:
  • 我将页眉和页脚设置为Position:Fixed。但如果是可滚动的内容,则文本将转到页眉/页脚区域:下面是我的完整代码:http://jsfidle.net/kaqz1km2/6/ 在这种情况下,我不想使用background-image或background-color。 下面是CSS: null null

  • 我正在纠结于应用程序的布局。我只想用HTML&CSS来实现它,但绝望正在逼近。我需要: 固定高度、100%宽度、静态标题 固定高度、100%宽度、静态页脚 固定宽度的内容区域,居中和全部剩余高度 内容区域需要: 两列,均为全高 上面的内容相当简单,但可能需要更改以适应下一部分。 每一列都需要: 静态标头 静态页脚 页眉和页脚之间的可滚动内容区域 我花了一天的时间尝试各种方法(甚至是基于--喘息--

  • 问题内容: 我正在尝试使用bootstrap 3表制作具有固定标题和可滚动内容的表。不幸的是,我发现的解决方案不适用于引导程序或使样式混乱。 这里有一个简单的引导表,但是由于某种原因我不知道tbody的高度不是10px。 例: 问题答案: 这是有效的解决方案:

  • 问题内容: 我正在寻找一种解决常见问题的方法,即在页面的页脚处停止固定对象。 我基本上在屏幕的左下角有一个固定的“共享”框,我不希望它在页脚上滚动,因此我需要它在页脚上方停止。 我在这里以及其他地方都看过其他问题。但是我无法使其适合我的情况。 这是共享框的html: …和CSS: 页脚是并且它没有固定的高度(如果有任何区别)。 如果有人可以帮助我为此创建一个简单的jQuery解决方案,我将不胜感激

  • 问题内容: 在Facebook页面中浏览时,页面加载之间的页眉和页脚固定部分仍然可见,并且地址栏中的URL也会相应更改。至少,这就是我的错觉。 从技术上来讲,Facebook如何实现这一目标? 问题答案: 有关样式的设置,请参考Mark Brittingham的答案,尽管我认为这不是您要的。我将为您提供有关其工作原理的技术细节(以及为何如此出色)。 将鼠标悬停在标题中的“个人资料”链接上时,请查看

  • 问题内容: 我最近一直在研究CSS布局,该布局将显示固定宽度(最小宽度,最好可扩展)的单个居中列,占据整个高度(减去页眉和页脚)。 有什么建议吗?我已经尝试过这里发布的几种方法,但是没有一种符合我的标准。另外,我不想为此使用JS,因此它必须是纯CSS。 我不是专家,所以我不知道采用哪种方法: 三列,每列的边距减去中心列宽度的一半再加上一个假的中心列,以拉伸到100%的高度?我有点不喜欢这个想法,因