CSS 响应式绝对定位

Question

我有一个下拉菜单，其位置应取决于标题的高度。标题的高度根据内容、字体大小和媒体查询设置的填充而变化，这取决于视口高度。

HTML：

<header>
  <p>Example</p>
  <nav>
    <a>Link</a>
    <a>Link</a>
    <a>Link</a>
  </nav>
</header>

CSS：

body {
  background-color: white;
}

header {
    background-color: grey;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
}

@media(max-height: 500px) {
  header {
    padding: 0;
  }
}

nav {
  background-color: #CCC;
  position: absolute;
  top: 82px;
  width: 100%;
}

a {
  border-bottom: 1px solid white;
  display: block;
  padding: 0.75rem;
}

想象一下nav折叠起来的下拉菜单。

小提琴： https: //jsfiddle.net/mjufc63b/2/

如果将窗口的高度降低到 500 像素以下，标题和导航之间会出现白色间隙，但事实不应该如此。另外，如果您更改浏览器的字体大小。

有没有一种解决方案可以使下拉菜单始终位于标题下方，与标题高度无关，并且位于其他内容上方（绝对定位的作用），而不使用 javascript 并且无需移动nav外部header？

Answer 1

将顶部设置为 100%，在媒体查询之外

body {
  background-color: white;
}

header {
    background-color: grey;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
}

@media(max-height: 500px) {
  header {
    padding: 0;
  }
}

nav {
  background-color: #CCC;
  position: absolute;
  top: 100%;
  width: 100%;
}

a {
  border-bottom: 1px solid white;
  display: block;
  padding: 0.75rem;
}

<header>
  <p>Example</p>
  <nav>
    <a>Link</a>
    <a>Link</a>
    <a>Link</a>
  </nav>
</header>