ページ本文の高さと #main 要素が指定されているときに、フッターで `position: Sticky` が機能しないのはなぜですか?

位置: 高さを指定するとスティッキーが機能しない

問題:

ユーザーに問題が発生するここで、#footerNav として指定されるフッターは、ページ本体と #main 要素の両方に高さプロパティが設定されている場合、position: Sticky 動作に準拠できません。フッターは、ビューポートの上部に固定してスクロールするのではなく、静的なままになります。

解決策:

この問題は、高さのプロパティによって引き起こされるコンテンツのオーバーフローによって発生します。 Position: Sticky は、それを含むブロックが指定されたしきい値に達した場合にのみアクティブになるように設計されています。この場合、body { height: 100%; を設定します。 } は、フッターがすぐにそのブロックを含むブロックの最後に到達する状況を作成し、position: Sticky がアクティブ化されないようにする。

説明:

position の定義による。 : スティッキー、要素がその要素を含むブロック内で指定されたしきい値を越えたときにスティッキー位置が適用されます。この場合の包含ブロックはボディであり、body { height: 100% } が設定されているため、ボディの高さはビューポートに制限されます。

#main { height: 92% } が指定されている場合, 利用可能な高さの 92% が #main に割り当てられ、#footerNav には 8% だけが残ります。 #footerNav はすでにその含まれているブロック (本文) の下部にあるため、ビューポートの境界を越えてスクロールして、position: Sticky をアクティブにすることはできません。

解決策:

この問題を解決するには、コンテンツがそれを含むブロックからオーバーフローしないようにしてください。これは、body と #main から高さのプロパティを削除することで実現でき、オーバーフローを引き起こすことなくコンテンツがビューポート内で自然に流れるようになります。

追加メモ:

• 高さを vh などのパーセンテージで指定することは、同じ問題が発生する可能性があるため、依然としてお勧めできません。
• この問題は、Firefox 61 (Nightly)、Safari 53 (Tech Preview)、および Safari 53 (Tech Preview) で発生しました。 Chrome 65.

以上がページ本文の高さと #main 要素が指定されているときに、フッターで `position: Sticky` が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。