CSS响应绝对定位?
CSS响应绝对定位?
提问于 2018-09-06 06:28:05
我有一个下拉菜单，其位置应取决于标题的高度。标题的高度因内容，字体大小和媒体查询根据视口高度设置的填充而异。
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？
Stack Overflow用户
发布于 2018-09-06 15:51:25
在媒体查询中，如果高度低于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。但一般来说，对于更多内容，您可以在其中创建一个新的包装元素，作为“太空采访者”。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100002573
复制相关文章
相似问题
腾讯云开发者
