Html 无重叠的固定导航分区（无高度）

我正在尝试

定位：固定页面顶部的导航栏（无滚动），但下面的第一个div重叠（请参阅：您看不到第一行内容）

我知道“经典”解决方案，但我既不能强制元素的高度，也不能使用基于像素的边距（或填充）。Javascript不是一个选项（我需要纯CSS或HTML）

我不敢相信说“保持在顶部，无论你的身高，其他一切都应该遵循下面的原则”是如此的困难……
是否可以复制固定标题并使用不同的css类？如果是这样的话，您可以创建一个隐藏的div副本，但仍然占用固定div后面的空间。在滚动时，它可能看起来很奇怪，但我不确定你有很多其他的选择

<div class="fixed-header">I'm fixed at the top!</div>
<div class="header-hidden">I'm fixed at the top!</div>
<div class="main-content">
    text row 1 text row 1 text row 1 text row 1 text row 1 text row 1
    <br>text row 2text row 2text row 2text row 2text row 2text row 2text row 2text row 2
    <br>text row 3text row 3text row 3text row 3text row 3text row 3text row 3text row 3
</div>

如果没有JS或添加边距/填充以从顶部抵消它，这是不可能的。固定位置元素不在文档流中，因此被忽略。
.fixed-header {
    position: fixed;
    top: 0px;
    background-color: green;
    border-style: solid;
    border-width: medium;
    border-color: fuchsia;
    width: 100%;
}
.header-hidden {
    position: relative;
    top: 0px;
    background-color: green;
    border-style: solid;
    border-width: medium;
    border-color: fuchsia;
    width: 100%;
    visibility: hidden;
}
main-content {
    background-color: fuchsia;
    border-style: solid;
    border-width: medium;
    border-color: green;
}