首頁 > web前端 > css教學 > 為什麼設定'高度”時'位置:黏性”不起作用?

為什麼設定'高度”時'位置:黏性”不起作用?

Patricia Arquette
發布: 2024-11-23 11:04:18
原創
880 人瀏覽過

Why Doesn't 'position: sticky' Work When Setting 'height'?

設定「高度」時「position:sticky」不起作用

正如您所注意到的,在頁腳元素上設置height 屬性當您向下捲動時,防止它黏在頁面頂部。出現此行為的原因是黏性定位演算法的工作方式。

根據 CSS 規範,黏性元素被視為相對定位,直到其包含區塊跨越指定閾值。在您的例子中,包含區塊是 body 元素,其高度為 100%。當高度為 92% 的主元素向下捲動時,頁腳元素到達 body 元素的底部,並被視為位於其包含區塊的相對邊緣。因此,它不再被視為黏性並保留在頁面底部。

要解決此問題,您可以從主元素中刪除 height 屬性。這將允許頁腳元素按預期粘在頁面頂部。或者,您可以將 body 元素的 height 屬性設為 100vh 而不是 100%。這將確保 body 元素始終與視窗高度相同,並且無論主元素的高度如何,頁腳元素都會黏在頁面頂部。

以上是為什麼設定'高度”時'位置:黏性”不起作用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板