ドロップダウンメニューがあり、その位置はヘッダーの高さに依存するはずです。ヘッダーの高さは、ビューポートの高さに応じて、コンテンツ、フォントサイズ、およびメディアクエリによって設定されるパディングによって異なります。
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？
メディアクエリの外部で、上位を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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加