Question

我的问题将基于问题“ Moving DOM elements below a fixed navigation bar”，因为我的问题非常相似。

* {
  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>

对该代码段进行了一些更改以适合我。我特意放了许多导航列表项，以使我的观点更加清楚（我希望）。上面链接的已接受的有问题的解决方案为<header>提供了无响应的高度，在这里用作空格（“。nav-box”）。因此，调整视口大小（较小）时，列表项会自动换行，但是header的编码不会随更改而移动-内容会被覆盖固定了<nav>。

我的问题：

如何在{strong>仅CSS 中（如果可能）将<header>的高度设置为响应<nav>的高度变化列表项何时包装？

Answer 1

如果知道固定导航何时需要占用两行，则可以使用媒体查询。是的，我知道这不是一个可靠的解决方案，但是如果您的导航大小固定，则可以使用。

* {
  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>

Answer 2

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

header {
    position: sticky;
    top: 0;
}

注意，这是恕我直言，最干净的解决方案，但是根据您的需要，它可能不适合您，因为IE中不支持position: sticky （如果您照顾IE）

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

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

2 个答案: