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>

​

Answer 2

在低于500px高度的媒体查询中，从nav元素中删除固定的上边距。

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

实际上，除了媒体查询之外，您也可以在默认情况下执行此操作。将上边距定义为自动。这样你就不必关心固定值了

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

因为你的header是固定的，它不会推入其他元素，所以为了做到这一点，你需要在内部元素中添加空格。例如：

header {
    background-color: grey;
    position: fixed;
    width: 100%;
}

header p{
    padding: 1rem 0;
}

如果您从header中删除填充并将其添加到内部p元素，它将推送您的nav。但一般来说，对于更多的内容，你可以在里面创建一个新的包装器元素，它将作为“空间占用者”工作。