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

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

如果您使用的//TH//SPAN[not(*)] 元素的header值为position;正如您所注意到的那样，它将位于前进元素的“顶部”。

使用fixed属性是确保您的padding-top不会“阻止”前进元素上的内容的一种方法（让我们假装它是header元素） ：

section

就像你说的那样，一个问题是，如果header ~ section { padding-top: 50px; } 没有静态高度（可能应该这样），并且在切换视口大小时，你必须更改header值。

就个人而言，我认为这不是一个问题，因为media queries很容易使用。

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