滾動到頂部按鈕在底部造成了頁面多餘的空白
P粉226642568
P粉226642568 2023-08-13 19:52:48
0
1
406

我按照一些教程創建了一個基於CSS的浮動滾動到頂部按鈕。然而,我注意到最後一個HTML元素(例如最後一行)下面有額外的空白空間。額外的空白空間的高度與我的按鈕高度(50px)相符。

我還嘗試添加一個額外的div標籤來封裝arrowUp div標籤,間隙減少了,但仍然有一些較小但明顯的空白空間。

我想知道是否有一種方法可以避免額外的空白空間?

#arrowUp { position: sticky; width: 50px; bottom: 120px; background: #699462; border-radius: 10px; aspect-ratio: 1; margin-left: auto; margin-right: 20px; // margin-bottom: 150px; } #arrowUp a { content: “”; position: absolute; inset: 25%; transform: translateY(20%) rotate(-45deg); border-top: 5px solid #fff; border-right: 5px solid #fff; }

第一行。













































































最後一行。


>

P粉226642568
P粉226642568

全部回覆 (1)
P粉376738875

我認為在你的情況下,最好使用position: fixed;而不是sticky。請注意,你需要設定right: 0;來將「按鈕」定位在螢幕的右邊緣。或者,你可以設定right: 20px;並刪除margin屬性。

快速解釋

「額外的空白」之所以存在,是因為使用sticky時,元素被定位到文件的正常流程中。這就像使用position: relative;並設定top: -20px一樣-元素會向上移動20px,但原始空間被保留,因為它「停留」在文件流中。而使用position: fixed;會將元素從文件流中取出。


我建議閱讀關於CSS中的文檔流和定位的相關內容:

    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!