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

在500 xx以下的媒体查询中，从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。但一般来说，对于更多内容，你可以在里面创建一个新的包装元素，它将作为＆＃34; space-terer＆＃34;。

CSS响应绝对定位

2 个答案: