使用RESPONSIVE空格填充符将内容移动到固定导航栏下

Question

我的问题将基于"在固定导航栏下移动DOM元素"的问题，因为我的问题非常相似。

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}

<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>

这个片段做了一些修改以适合我。我故意放了很多导航列表项，以使我的观点更清晰(我希望如此(。上面链接的所讨论的可接受的解决方案对CCD_ 1给出非响应高度，此处充当空间填充符(".nav框"(。因此，当调整视口大小时(较小(，列表项会换行，但header不会随更改而移动-内容会被固定的<nav>覆盖。

我的问题：

在中，仅CSS(如果可能(如何将<header>的高度设置为，以在列表项被包装时响应<nav>的高度变化？

Answer 1

如果您想要一个真正响应的解决方案，请从nav中删除position: fixed，并在<header>0中添加position: sticky和top: 0。

header {
position: sticky;
top: 0;
}

注意这是IMHO最干净的解决方案，但根据您的需要，它可能不适合您，因为position: sticky在IE中不支持(如果您喜欢IE(

示例：https://codepen.io/anon/pen/MzrgEr

Answer 2

如果您知道固定导航何时必须使用2行，则可以使用媒体查询。是的，我知道这不是一个可靠的解决方案，但如果你的导航大小是固定的，它可以工作。

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}
@media (max-width: 505px) {
main {
margin-top: 3em;
}
}

<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc
a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non
justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in
finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>