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，并且不会移动header以外的nav？

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。但一般来说，为了获得更多的内容，你可以在里面创建一个新的包装元素，作为“空间接受者”。