當我定義“高度”屬性時，為什麼我的“位置：黏性”頁腳不起作用？

定義'height' 時'position: Sticky' 不起作用

使用CSS 建立黏性標題時，通常會設定頁腳div的高度屬性。然而，這有時會導致黏性行為失敗。

原因是黏性定位依賴包含塊來決定黏性點。當在頁腳 div 上定義 height 屬性時，它就變成包含區塊。因此，頁腳 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中文網其他相關文章！