当我定义“高度”属性时，为什么我的“位置：粘性”页脚不起作用？

定义 '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中文网其他相关文章！