我的<header> position: fixed;位于显示屏的顶部。
这样做的自然结果是<main>最终会落在相当大的<header>之下。
我之前遇到过这个问题，并通过margin-top上的简单<main>作业解决了这个问题。这里的问题有点不同。
<header>的高度是可变且未知的。它的顶部和底部填充为5px，底部边距为5px。它没有明确设定自己的高度;它由内容决定。
<header>中的最大元素是将其高度指定为20vh的图像。还有一个<h1>和<h3>，使用<vh>单位再次调整大小。我知道没有办法允许我偏移<main>因此它总是低于动态大小，响应<header>。
我一直在浏览，但没有找到任何单一的解决方案来解决这个问题。许多想法完全依赖于使用JavaScript捕获窗口大小调整，获取标头的计算高度并指定要匹配的主要顶部。我担心这种方法会降低性能，并且当JS赶上滚动时也会引入讨厌的页面跳跃/跳跃等。
这是一种通常在响应式设计中解决的问题？理想情况下，我正在寻找这个问题的纯CSS解决方案，或者“position：fixed;”的某种解决方法。如果做不到这一点，优雅而多功能的JS解决方案不会影响性能。这个问题引起了我的问题，因为我通常不会尝试解决绝对/固定定位问题。
非常感谢任何建议。
-Ilmiont
答案 0 :(得分：1)
我会检查this post。他们提到用第二个标题或使用javascript来推送内容。
我的猜测是javascript会更简洁，所以你没有额外的内容和对服务器的不必要的请求。