「高さ」を設定すると「位置: スティッキー」が機能しないのはなぜですか?

「height」の設定時に「position:sticky」が機能しない

お気づきのとおり、フッター要素に height プロパティを設定すると下にスクロールしたときにページの上部に貼り付くのを防ぎます。この動作は、スティッキー配置アルゴリズムの動作方法が原因で発生します。

CSS 仕様によれば、スティッキー要素は、その要素を含むブロックが指定されたしきい値を超えるまで、相対的に配置されたものとして扱われます。あなたの場合、含まれるブロックは body 要素であり、高さは 100% です。高さ 92% のメイン要素が下にスクロールされると、フッター要素はボディ要素の一番下に到達し、その要素を含むブロックの反対側の端にあると見なされます。したがって、スティッキーとして扱われなくなり、ページの下部に留まります。

この問題を解決するには、メイン要素から高さプロパティを削除します。これにより、フッター要素が意図したとおりにページの上部に固定されるようになります。あるいは、body 要素の height プロパティを 100% ではなく 100vh に設定することもできます。これにより、body 要素が常にビューポートと同じ高さになり、メイン要素の高さに関係なく、フッター要素がページの上部に固定されるようになります。

以上が「高さ」を設定すると「位置: スティッキー」が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。