Teknik Footer Sticky yang bijak

Ketika datang ke "Footer Sticky", kebanyakan orang pada masa kini memikirkan position: sticky : Dalam konteks elemen induk menatal, elemen footer ditetapkan pada skrin.

Tetapi ini bukan tumpuan artikel ini. Konsep "Footer Sticky" muncul lebih awal daripada position: sticky , dan maknanya sedikit berbeza. Ideanya ialah: walaupun kandungan halaman tidak mencukupi untuk menolaknya ke bahagian bawah, ia akan melekat pada bahagian bawah skrin. Tetapi jika terdapat kandungan yang cukup, ia akan gembira dapat ditolak di bawah.

Kami telah memperkenalkan lima kaedah pelaksanaan pada masa lalu, termasuk beberapa teknologi moden seperti calc() , Flexbox, dan CSS Grid.

Sekarang, kaedah keenam berada di pentas! Pembaca Sílvio Rosa mencadangkan kaedah berikut:

(Lebih baik melihat pada skrin desktop bersaiz sederhana, kerana footer melekit kebanyakannya paling berkesan pada saiz skrin ini.)

Kodnya sangat ringkas:

 html, badan {ketinggian: 100%;}

badan> footer {
  Kedudukan: melekit;
  Atas: 100VH;
}

Satu perkara yang saya hargai mengenainya ialah ia tidak memerlukan pembungkus tambahan khas untuk kandungan bukan kaki.

Ia juga sedikit membingungkan. Apabila saya melihat top: 100vh; Saya rasa ini tidak akan berfungsi kerana ia menolak kaki di luar kawasan visual. Tetapi itulah kepandaian. Terlepas dari saiz footer (tiada nombor sihir yang diperlukan), ia berbuat demikian, dan kemudian kedudukan melekit "menghisapnya kembali" untuk mematuhi tepi bawah. Tetapi ia tidak pernah bertindih dengan kandungan, jadi ia dengan senang hati ditolak di bawah kandungan, yang merupakan prinsip teras corak footer melekit.

Atas ialah kandungan terperinci Teknik Footer Sticky yang bijak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!