Butang tatal ke atas mencipta ruang putih tambahan di bahagian bawah halaman

Question

Saya mengikuti beberapa tutorial untuk mencipta butang tatal terapung berasaskan CSS ke atas. Walau bagaimanapun, saya perhatikan bahawa terdapat ruang putih tambahan di bawah elemen HTML terakhir (cth. baris terakhir). Ketinggian ruang putih tambahan sepadan dengan ketinggian butang saya (50px).

Saya juga cuba menambah teg div tambahan untuk menyertakan teg div arrowUp, dan jurang telah dikurangkan, tetapi masih terdapat ruang putih yang kecil tetapi ketara.

Saya tertanya-tanya sama ada terdapat cara untuk mengelakkan ruang putih tambahan?

#arrowUp {
  kedudukan: melekit;
  lebar: 50px;
  bawah: 120px;
  latar belakang: #699462;
  jejari sempadan: 10px;
  nisbah aspek: 1;
  jidar-kiri: auto;
  jidar kanan: 20px;
// margin-bawah: 150px;

}

#arrowUp a {
  kandungan: "";
jawatan: mutlak;
  sisipan: 25%;
  transform: translateY(20%) rotate(-45deg);
  atas sempadan: 5px pepejal #fff;
  sempadan-kanan: 5px pepejal #fff;
}

 Baris pertama. 































































































 





            

Answer 1

Saya rasa dalam kes anda lebih baik menggunakan position: fixed;而不是sticky。请注意，你需要设置right: 0;来将“按钮”定位在屏幕的右边缘。或者，你可以设置right: 20px; dan alih keluar atribut margin.

Penjelasan pantas

"ruang putih tambahan" wujud kerana menggunakan sticky时，元素被定位到文档的正常流程中。这就像使用position: relative;并设置top: -20px一样-元素会向上移动20px，但原始空间被保留，因为它“停留”在文档流中。而使用position: fixed; mengeluarkan elemen daripada aliran dokumen.

---

Saya mengesyorkan membaca ini tentang aliran dokumen dan kedudukan dalam CSS:

• Terangkan proses biasa
• Harta dan nilai kedudukan CSS