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

【问题标题】：Padding of container is ignored if anchor link is used如果使用锚链接，则忽略容器的填充
【发布时间】：2014-03-06 05:38:54
【问题描述】：

我有一个溢出设置为隐藏的容器，它有一个高于它的子级。当我激活指向其中对象的锚链接时，容器的 padding-top 不再用于计算其子项的位置。

如何保持 padding-top 完好无损？

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），结果都是一样的。

【问题讨论】：

这是因为具有“tall”类的 div 的绝对定位。尝试设置 margin-top 吗？
来看看这个小提琴 - jsfiddle.net/55mJS
Margin-top 不能解决这个问题 - 任务是让所有子元素保持相对于容器的位置。
好的。哈希姆的解决方案似乎不错。

标签： html css overflow anchor padding

【解决方案1】：

其实padding 没什么问题。它正在工作。

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

上面的空间（你在视觉上看到的是padding-top），会因为overflow: hidden; CSS声明而被隐藏。

您可以使用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.

【讨论】：

【解决方案2】：

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

【讨论】：