當指定頁面主體和 #main 元素的高度時，為什麼「position: Sticky」在我的頁腳上不起作用？

位置：指定高度時粘性不起作用

問題：

用戶遇到問題其中指定為#footerNav 的頁腳無法遵守位置：設定高度屬性時的黏性行為對於頁面主體和#main 元素。頁腳保持靜態，而不是固定在視窗頂部滾動。

解：

問題是由於高度屬性導致內容溢位。 position:sticky 被設計為僅當其包含區塊達到指定閾值時才變為活動狀態。在這種情況下，設定 body { height: 100%;建立一種情況，頁腳立即到達其包含區塊的末尾，從而防止position:sticky啟動。

說明：

根據位置的定義：黏性，當元素在其包含區塊內跨越指定閾值時應用黏性位置。本範例中的包含區塊是 body，當設定了 body { height: 100% } 時，body 的高度就被限制在視窗內。

當指定 #main { height: 92% } 時，92%的可用高度分配給#main，只留下8%給#footerNav。由於 #footerNav 已經位於其包含區塊（主體）的底部，因此它無法滾動越過視窗邊界並啟動位置：黏性。

解決方案：

要解決此問題，請確保內容不會溢出包含區塊。這可以透過從 body 和 #main 中刪除高度屬性來實現，允許內容在視窗內自然流動而不會導致溢出。

附加說明：

• 仍然不建議以百分比形式指定高度，例如 vh，因為它可能會導致同樣的問題。
• 問題在 Firefox 61（Nightly）、Safari 53（技術預覽版）和 Chrome 65 中遇到。

以上是當指定頁面主體和 #main 元素的高度時，為什麼「position: Sticky」在我的頁腳上不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！