Css 固定标题，但不使用正文填充的硬值

通常，为了防止任何主体内容在固定导航下渲染，我将向主体元素添加padding top

我不喜欢这样，因为我必须在车身衬垫上指定一个硬单位值，头部高度，或者两者都指定，以确保它们匹配。我不喜欢给标题加上硬编码的高度，然后每个断点的样式就变得更麻烦了，特别是当我为一个公司网站构建时，他们的标题有很多不断变化的业务规则，在不同的断点上有不同的条件

在不使用硬单位值的情况下，如何使动态大小固定的标题不与正文内容重叠？我对使用JavaScript不感兴趣，只对CSS感兴趣

---

下面是我所指内容的一个过于简化的示例：

在未来的CSS标准中，您可以将标题的高度设置为一个变量，并在

正文的
填充顶部
中使用它

此时，您可以使用不同的CSS预处理器（如SCS、SASS）来实现这一目标

参考：
在未来的CSS标准中，您可以将标题的高度设置为一个变量，并在
主体的
顶部填充中使用它

此时，您可以使用不同的CSS预处理器（如SCS、SASS）来实现这一目标

参考：
我认为，当导航被固定（因此无法流动）时，身体不可能坐在导航下方。我通常的解决方案是，如您所说，在主体上填充顶部，但将其设置为一个变量。使用表示可以将设置中基于断点的高度设置为一个变量，然后在基本布局样式中访问一次。但据我所知，它要么是幻数，要么是JS。如果你想要一个黑客解决方案，其中你有一个虚拟div，它位于DOM中的同一个位置，如果它不固定，那么你的固定导航将在逻辑上出现，然后给它与你的导航相同的高度。不过，这确实并不比使用填充顶好多少。事实上，很可能是worseI，我不认为当导航被固定（因此不流动）时，身体坐在导航下方是可能的。我通常的解决方案是，如您所说，在主体上填充顶部，但将其设置为一个变量。使用表示可以将设置中基于断点的高度设置为一个变量，然后在基本布局样式中访问一次。但据我所知，它要么是幻数，要么是JS。如果你想要一个黑客解决方案，其中你有一个虚拟div，它位于DOM中的同一个位置，如果它不固定，那么你的固定导航将在逻辑上出现，然后给它与你的导航相同的高度。不过，这确实并不比使用填充顶好多少。事实上，情况可能更糟