注意
本現象の原因と解決策について
本稿では遭遇した現象の原因については、調査と検証が足りないため掲載していない。従って解決方法の効果も保証できない。
環境による差異
HTML や CSS のレンダリングはブラウザやデバイスなど環境に左右されるため、この方法で解決するとは限らない。
現象
要素の固定
<nav> 要素を以下の方法で画面上部に固定した。
HTML
<html>
<body>
<nav>
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
</nav>
<!-- メインコンテンツ -->
</body>
</html>スタイル
html { height: 100%; }
body { height: inherit; }
nav {
position: sticky;
top: 0;
}発生した問題
固定した <nav> がスクロール中に消失する。
再現
発生した現象をできる限り再現した。スクロールすると途中で「ナビゲーション」が消えるはずだ。 [F1]
子要素
解決
<body> の height を inherit から
max-content へ変更する。
変更前
body { height: inherit; /* 100% */ }変更後
body { height: max-content; }再現
実際に <body> の height を inherit から max-content 変更したときの変化を再現した。「変更前」は下へスクロールすると「ナビゲーション」が消えるが「変更後」は消えない。
変更前
子要素
変更後
子要素
まとめ
発生した現象
スクロールすると sticky で固定した要素が消えた。
解決策
子要素が飛び出さないように親要素と子要素の高さを合わせた。
追記
html の height による問題
その後 CSS を編集していると、今回の現象は <html> に height: 100% を指定したことが原因である可能性が出てきた。現時点では原因が height 自体の問題か、値の 100% に問題があるのか、それ以外の問題かは判っていない。とにかく
body の height に設定に関わらず <html> から height の設定を削除すれば、スクロールで <nav> が消えないという結果を得た。
削除する部分
html { height: 100%; }html の height を削除した例の再現
<html> から height を削除した際の挙動を再現した。それぞれ
<body> の height を変更しているが、いずれもスクロールによって「ナビゲーション」は消失は発生しないはずだ。
body の height を削除した場合
子要素
body { height: inherit; } の場合
子要素
body { height: max-content; } の場合
子要素