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

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

CSS を使用してスティッキーヘッダーを作成する場合、一般的に次のことが行われます。フッター div の高さプロパティを設定します。ただし、これによりスティッキー動作が失敗する場合があります。

その理由は、スティッキー配置がスティッキング ポイントを決定する際に、それを含むブロックに依存しているためです。フッター div で高さプロパティが定義されている場合、それが包含ブロックになります。その結果、フッター div はすでにそのブロックを含むブロックの端にあり、スティッキー動作をトリガーするために通過するしきい値はなくなりました。

この問題を解決するには、から高さプロパティを削除してください。フッター部これにより、本文が包含ブロックとなり、フッター div が意図したとおりページの下部に固定されるようになります。

これは、CSS を変更して固定を修正する方法の例です。動作:

html,
body {
  height: 100%;
  margin: 0;
}

#main {
  height: 92vh;
}

#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

#landingContent {
  width: 20vw;
}

#footerNav {
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

この変更により、フッター div は意図したとおりページの下部に固定されるようになります。

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