html - 内容位于未知可变高度的固定标题下方

Question

我有一个 <header>那是 position: fixed;到显示屏的顶部。

这样做的自然结果是 <main>最终进入相当大的 <header> 下面.

我以前遇到过这个问题，并用一个简单的 margin-top 解决了它在 <main> 上分配.不过这里的问题有点不同。

<header> 的高度是可变的和未知的。它有 5px 的顶部和底部填充和 5px 的底部边距。它没有自己明确设置的高度；由里面的内容决定。

<header> 中最大的元素是一个图像，其高度指定为 20vh .还有一个 <h1>和 <h3> , 再次使用 <vh> 调整大小单位。我不知道有什么办法可以抵消 <main>所以它总是低于这个动态大小的响应 <header> .

我一直在浏览 SO，但没有找到解决此问题的单一公认解决方案。许多想法完全依赖于使用 JavaScript 捕获窗口大小调整，获取标题的计算高度并分配 main 的顶部以匹配。我担心这种方法会降低性能，并且还会在 JS catch 滚动时引入烦人的页面跳转/跳跃等。

响应式设计通常如何解决这种问题？理想情况下，我正在寻找解决此问题的纯 CSS 解决方案，或者寻找“position: fixed;”的某种变通方法。如果做不到这一点，一个优雅且通用的 JS 解决方案不会影响性能。这个问题给我带来了麻烦，因为我通常尝试解决绝对/固定定位问题都无济于事。

如有任何建议，我们将不胜感激。

-伊尔米翁

Answer 1

我会检查 this post .他们提到使用第二个 header 或使用 javascript 将内容下推。

我的猜测是 javascript 会是一种更简洁的方法，因此您不会向服务器发出额外的内容和不必要的请求。