定義された要素の高さで「position: Sticky」が機能しないのはなぜですか?

「高さ」が定義されている場合、'position: Sticky' が機能しない

スティッキー配置について

スティッキー配置。 CSS によって定義され、フロー ルート (通常はブラウザのビューポートまたはスクロール可能なコンテナ) 内で動作し、要素を有効にします特定の条件が満たされるまで、周囲に対して固定されたままになること。要素が指定されたしきい値 (ビューポートからの上部のオフセットなど) に達すると、その要素は、その要素を含むブロックの反対側の端に到達するまで、所定の位置に「スタック」します。

スティッキー機能に影響を与えるオーバーフロー

指定されたシナリオでは、'position: Sticky' が要素に適用されていますが、動作が期待どおりではありません。これは必須です要素を含むブロックと、存在する可能性のあるオーバーフローを考慮します。

要素と含まれるブロックの関係

提供されたコードでは、「position: Sticky」を持つ要素(#footerNav) には、それを含むブロックが「html, body」として設定されています。 CSS は 'html, body { height: 100% }' を定義しているため、ビューポート全体が包含ブロックになります。

オーバーフローの問題

ただし、#main div には「高さ: 92%」プロパティがあり、#footerNav には「高さ: 8%」プロパティがあり、コンテンツはそれを超えてオーバーフローします。結合された「高さ」の値。このオーバーフローにより、拡張された包含ブロックが作成され、スティッキー要素が反対側の端 (つまり、#main の下部) に早く到達することが可能になります。その結果、スティッキー要素はブラウザ ウィンドウの下部に到達するまでスタックしたままではなく、#main の最後で固定されたように見えます。

解決策

解決するにはこの問題については、#main 要素の高さ制限を削除して、コンテンツが自然にオーバーフローできるようにすることができます。これにより、スクロール コンテナがビューポート全体に残り、スティッキー要素が期待どおりに機能し、ページの実際の下部に到達するまでスタックされたままになります。

以上が定義された要素の高さで「position: Sticky」が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。