為什麼「位置：黏性」不使用定義的元素高度？

定義「height」時「position: Sticky」不起作用

了解黏性定位

黏性定位，如由CSS定義，在流根（通常是瀏覽器視口或可捲動容器）內運行，並使元素相對於周圍環境保持固定，直到滿足某些條件。當元素遇到指定的閾值（例如，距視口的頂部偏移量）時，它會「卡」在適當的位置，直到到達其包含區塊的相對邊緣。

影響黏性功能的溢出

在給定的場景中，「position:sticky」應用於元素，但行為不符合預期，必須考慮元素的包含塊以及可能存在的任何溢出。

元素和包含區塊關係

在提供的程式碼中，帶有'position: Sticky' 的元素(#footerNav) 其包含區塊設定為'html, body' 。由於 CSS 定義了 'html, body { height: 100% }'，整個視窗成為包含區塊。

溢位問題

但是，由於#main div 具有“高度：92%”屬性，而#footerNav 具有“高度：8%”，內容溢位超出組合的“高度”值。這種溢出創建了一個擴展的包含塊，允許黏性元素過早到達相對的邊緣（即，在 #main 的底部）。因此，黏性元素會固定在 #main 的末尾，而不是一直卡住直到到達瀏覽器視窗底部。

解決方案

解決方法解決這個問題，可以取消 #main 元素的高度限制，讓內容自然溢出。這可確保滾動容器保留在整個視窗中，並且黏性元素按預期運行，保持卡住狀態，直到到達頁面的實際底部。

以上是為什麼「位置：黏性」不使用定義的元素高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！