如何在不添加填充的情况下修复标题？

Question

我想修复我的标题。但是我的标题与我的正文内容重叠。我知道有一种方法可以修复它，添加填充。但是对于某些页面，我必须添加 padding-top: 20px;对于另一个页面，我必须添加 padding-top 50px； 此外，为了响应，我必须不断更改填充顶部。有人知道如何以动态方式进行吗？

#top-header-wrapper {
 background-color: gray;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 10;
}

Answer 1

如果您正在使用position 值为fixed 的header 元素；正如您所注意到的，它将位于进程元素的“顶部”。

使用padding-top 属性是确保您的header 不会“阻止”后续元素上的内容的一种方法（假设它是section 元素）：

header ~ section {
    padding-top: 50px;
}

正如您所说，一个问题是如果header 没有静态高度（它可能应该）并且在切换视口大小时，您必须更改padding-top 值。

我个人认为这不是什么大问题，因为media queries 易于使用。

但是，使用 CSS，它是您唯一的选择。这是使用javascript获取元素height并将另一个元素的padding-top设置为第一个元素height的方法，但是由于您询问的是css，因此最好的选择是使用@media规则。