Html CSS响应式绝对定位

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

HTML:

想象一下，

nav

是折叠的下拉菜单

小提琴：

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

---

是否有一种解决方案可以使下拉菜单始终位于标题下方，而不受标题高度的影响，同时也位于其他内容上方（绝对定位的作用），而无需使用javascript，并且无需移动

nav

外部

标题

？

在媒体内部查询低于500px的高度，从

nav

元素中删除固定顶部边距

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

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

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

由于您的

标题是固定的，因此它不会推送其他元素，因此为了这样做，您需要为内部元素添加空间。例如：

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

header p{
    padding: 1rem 0;
}

如果从
标题
中删除填充并将其添加到内部
p
元素中，它将推送您的
nav
。但一般来说，对于更多内容，您可以在内部创建一个新的包装器元素，该元素将用作“空格接受者”。
将顶部设置为100%，在媒体查询之外


正文{
背景色：白色；
}
标题{
背景颜色：灰色；
填充：1rem0；
位置：固定；
宽度：100%；
}
@介质（最大高度：500px）{
标题{
填充：0；
}
}
导航{
背景色：#CCC；
位置：绝对位置；
最高：100%；
宽度：100%；
}
a{
边框底部：1px纯白；
显示：块；
填充：0.75rem；
}

范例

链接
链接
链接
nav

应自动移动到顶部并闭合间隙，而无需在媒体查询中使用

top

css属性重新定义边距。在本例中，我可以这样做，是的，但是如果页眉高度因字体大小或内容高度而改变，我无法定义

顶部

边距。是的，对不起，我误解了你的问题。您可以查看我的答案。媒体查询的解决方案有效，但如果

标题的高度因字体大小或内容而改变，我需要一个通用解决方案。您的第二个解决方案将省略填充底部。。我更新了我的答案。另外，请检查@vals answer以获得备选方案.Nice。我太沉迷于媒体查询解决方案了，以至于我忘记了最通用的解决方案：）简单而干净的解决方案。。我真丢脸。谢谢大家!@阿明多亏了这两个人。很高兴它有帮助！
nav {
  background-color: #CCC;
  position: absolute;
  top: auto
  width: 100%;
}

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

header p{
    padding: 1rem 0;
}