Question

我有一个溢出设置为隐藏的容器，它有一个高于它的子容器。当我激活到其内部对象的锚链接时，容器的填充顶部不再用于计算其子项的位置。

如何保持填充顶部完整？

HTML：

<a href='#target'>Hit the top</a>
<div class='container'>
  <div class='tall'>Tall object</div>
  <div id='target'>Target</div>
</div>

CSS：

.container {
  padding: 40px;
  position: relative;
  overflow: hidden;
}
.tall {
  position: absolute;
  left: 200px;
  height: 2000px;
}

演示：http://jsfiddle.net/aSDk5/2/

我在IE，FF，Chrome，Opera，Safari上测试过它（在Win7上），结果是一样的。

Answer 1

实际上，padding并没有错。它正在发挥作用。

事实上，当您点击超链接时，container的内容会向上滚动到#target元素的顶部。

由于padding-top CSS声明，上面的空格（你在视觉上看作overflow: hidden;）会被隐藏。

您可以使用overflow-y: scroll;检查填充。

.container {
    background-color: navy;
    padding: 40px;
    position: relative;
    overflow-y: scroll; /* Then, move the scroll-bar to check the padding */
}

<强> JSFiddle Demo

Answer 2

scroll-margin-top 属性允许您定义浏览器在将滚动元素对齐到位时应使用的上边距。例如使用 scroll-margin-top: 10vh;将跳转到锚定部分，但要高 10vh，这正是您想要的。

如果使用锚链接，则忽略容器的填充

2 个答案: