Lampirkan footer ke bagian bawah halaman WordPress. Bagaimana cara memasang footer atau footer di bagian bawah halaman web dengan CSS? Kami memasukkan spacer dan melawan Internet Explorer

Mari beralih ke contoh kerja

Yang mana yang kita lihat? kelemahan tata letak dalam hal menerapkan efek footer yang dipaku? Kami melihatnya
1) Footer pada situs terletak di dalam blok dengan id=layout, yang tidak memiliki persentase tinggi. Menurut teori, dia, orang tua dan blok konten.content-left perlu mengatur ketinggian menjadi 100%. Masalah muncul dengan yang terakhir - tidak cocok untuk ini. Akibatnya, satu blok interlayer hilang atau footer tidak berada pada level yang tepat. Di samping itu,
2) Ketinggian footer bervariasi (tergantung jumlah elemen dalam daftar dan ukuran font, ini tidak terlihat dari HTML, tetapi dari CSS). DAN
3) di atas #tata letak ada blok iklan dengan tinggi tetap 90px;
4) tidak ada blok penyelarasan baik di footer atau (secara umum) di blok #tata letak(ya, tapi di atas blok .rotated_posts; namun, mungkin itu harus diklasifikasikan sebagai footer).

Poin 4 - Anda harus menggambarnya dengan skrip.
Tampaknya mudah untuk menangani poin ketiga dengan menambahkan #layout(margin-top:-90px;) Namun perlu diingat bahwa pemblokiran ini mungkin tidak ada - pemblokiran ini disembunyikan dengan pemotongan spanduk, atau pengiklan tiba-tiba memutuskan untuk tidak menampilkannya. Ada sejumlah halaman di situs yang tidak memilikinya. Oleh karena itu ketergantungan margin-atas dari blok iklan adalah ide yang buruk. Jauh lebih baik untuk menempatkannya di dalam #tata letak- maka dia tidak akan mengganggu apapun.

Poin pertama adalah agar footer yang dipaku berfungsi, Anda perlu menempatkan blok footer di bawah #tata letak. Namun, dengan bantuan javascript Anda dapat menerapkan skema footer lain yang dipaku, tetapi bagaimanapun juga, Anda memerlukan JS atau tata letak yang awalnya benar untuk melakukannya tanpanya.

Karena kami tidak bisa lebih kuat dari perancang tata letak situs web terbaru yang “menampar” footer di dalam konten, kami akan mengesampingkan gagasan untuk menempatkan footer dengan benar di situs web masa depan kami (yang, oleh karena itu, akan menjadi “lebih keren” daripada Habr!), dan kita akan membedah Habr dengan javascript (userscript) hingga satu kondisi yang benar. (Katakan saja bukan perancang atau pengalih tata letak yang harus disalahkan, tetapi jenis lokasi, tentu saja, menentukan keputusan strategis manajemen proyek.) Dengan cara ini kita tidak akan mencapai yang ideal, karena dalam satu atau dua detik pertama selama proses pemuatan halaman akan memiliki tata letak yang salah. Namun yang penting bagi kami adalah konsep dan peluang untuk melampaui kualitas website terpopuler di dunia IT.

Oleh karena itu, di tempat yang tepat dalam skrip (di awal, di akhir pemuatan halaman), kami akan menulis transfer blok iklan DOM dan footer ke tempat yang tepat. (Mari bersiap menghadapi kenyataan bahwa, karena skrip pengguna, solusinya akan lebih rumit daripada solusi murni.)
var dQ = function(q)(return document.querySelector(q);) //untuk memperpendek var topL = dQ("#topline"), lay = dQ("#layout"), foot = dQ("#footer" ); if(topL && lay) //banner - di dalam blok konten lay.insertBefore(topL, lay.firstChild); if(lay && foot && lay.nextSibling) //memindahkan footer lay.parentNode.insertBefore(footer, lay.nextSibling);
Kami telah menempatkan blok di tempatnya - sekarang yang tersisa hanyalah menetapkan properti yang diperlukan ke elemen. Ketinggian footer harus diatur dengan tepat, karena kita sudah mengetahuinya pada saat skrip pengguna aktif (akhir pemuatan halaman). Karena trigger point dari skrip pengguna, seperti disebutkan di atas, lompatan pada tampilan footer pada halaman tidak dapat dihindari. Anda dapat mencoba untuk memasang “wajah baik”, tetapi dengan “permainan buruk”? Untuk apa? "Permainan buruk" situs ini memungkinkan Anda membuat konsep tanpa usaha ekstra, yang akan cukup untuk menilai kualitas dan tidak diperlukan untuk "permainan yang benar" pada proyek Anda.
if(kaki)( //block-aligner

di footer h.apnd_el((clss:"clear", appendTo: footer)); var footH = kaki.offsetHeight; //...dan mengukur tinggi footer ) if(topL && lay && footer && lay.nextSibling)( //menyelaraskan blok dengan ketinggian yang diperlukan dalam konten ("tata letak") h.apnd_el((clss:" clear", css:( tinggi: (kakiH ||0) +"px"), appendTo: lay)); lay.style.minHeight = "100%"; h.addRules("#layout(margin-bottom:- "+ footH +"px !penting)html, isi (tinggi:100%)"); )
Di sini kami membiarkan diri kami menggunakan fungsi yang ditulis sendiri h.apnd_el, yang kira-kira melakukan hal yang sama seperti di jQuery -
$("").css((tinggi: kakiH ||0)).appendTo($(footer))
Dan kemudian - fungsi khas lainnya dalam mengimplementasikan aturan CSS - h.addRules. Anda tidak dapat melakukannya tanpanya di sini, karena Anda perlu mendeklarasikan aturan dengan " !penting" - justru karena kekhasan prioritas gaya dari skrip pengguna.

Dengan potongan kode ini, kita akan dapat melihat footer yang dipaku di skrip pengguna (setelah melompat ke bawah) dan memahami sepenuhnya cara membuat tata letak halaman. Menggunakan desain lompat setiap hari tidak menyenangkan, jadi disarankan untuk melakukannya hanya untuk demonstrasi dan pengujian. Pada skrip pengguna HabrAjax, saya menginstal skrip serupa, menutupnya dengan pengaturan "underFooter" (centang kotak di daftar pengaturan sebelum "footer dipaku ke bawah"), dimulai dengan versi 0.883_2012-09-12.

Apakah memaku footer memengaruhi kebutuhan untuk memperbarui gaya ZenComment jika sudah diinstal? Ya, benar. Karena rantai prioritas gaya yang kompleks, di mana gaya yang disisipkan oleh skrip pengguna memiliki prioritas terendah, kami harus sedikit menyesuaikan gaya pengguna untuk kemungkinan bekerja dengan footer yang dipaku. Jika Anda tidak memperbarui gaya pengguna Anda (ke 2.66_2012-09-12+), footer tidak akan berfungsi secara akurat.

Memblokir diputar_posting (tiga postingan populer dari masa lalu) terlihat lebih logis dengan footer, jadi pada skrip sebenarnya juga dipindahkan ke footer.

Poin kedua (dari daftar kekurangan tata letak) adalah pembahasan murni untuk Habr (tidak berlaku untuk skrip pengguna dan sebagian mengulangi yang sebelumnya).

Halaman memiliki masalah yang mencegahnya membuat footer yang dipaku menggunakan CSS murni - tinggi footer yang tidak ditentukan bergantung pada ukuran font default di browser. Untuk menerapkan footer menggunakan CSS, Anda perlu memilih tinggi relatif font, tetapi font tersebut mungkin tidak berfungsi jika komputer pengguna tidak memiliki font yang diperlukan. Oleh karena itu, solusinya harus menyertakan JavaScript yang dapat menyesuaikan perkiraan posisi footer ke posisi yang tepat menggunakan transisi. Atau, setelah melihat penerimaan solusi yang dibuat dalam skrip pengguna pada platform yang berbeda, buatlah instalasi footer yang diperhitungkan - pengamatan pertama menunjukkan bahwa solusi tersebut praktis.

Kesimpulan: dimungkinkan untuk mendesain tata letak sepenuhnya di Habré, tetapi untuk ini Anda memerlukan perancang tata letak yang memahami dengan jelas perilaku tata letak dan menempatkan blok dalam urutan yang benar. (Saat ini footer dan banner atas berada "di tempat yang salah" dan tidak sedemikian rupa sehingga Anda bisa menata footer begitu saja.) Anda dapat melakukannya tanpa JS jika Anda mengatur tinggi footer dalam satuan relatif, dengan mengambil beberapa ruang untuk ketidakpastian font.

Penerapan

Jika Anda mengaktifkan HabrAjax 0.883+, kita akan melihat "footer yang dipaku" berfungsi. Ketinggiannya disesuaikan menggunakan skrip. Ini memungkinkan Anda untuk mengevaluasi seberapa baik halaman dengan tampilan footer yang dipaku dibandingkan dengan halaman biasa. Gaya pengguna ZenComment kompatibel dengan skrip, tetapi agar footer yang dipaku berfungsi dengan benar, Anda perlu menginstal ZenComment versi 2.66_2012-09-12 +.

Fakta tentang perilaku implementasi

Perdukunan dengan footer, gaya dan aksara adalah perdukunan (hanya didukung oleh teori). Perilaku ini sedikit berbeda di berbagai browser, namun di beberapa tempat hal ini tidak terduga. Tanpa skrip pengguna dan penataan ulang blok, hasilnya akan berbeda. Inilah yang dihasilkan oleh eksperimen implementasi dalam skrip pengguna.

1) Firefox - kurangnya lompatan footer yang tidak terduga. Anehnya mereka tidak ada di sana - rendering terjadi setelah footer ditempatkan di bagian bawah.

2) Chrome - ini mengejutkan saya dengan "pengguliran mengembara" - ruang kosong di bagian bawah ditambahkan ke halaman dengan jangka waktu satu kali per detik - ada yang salah terjadi dengan perhitungan ketinggian. Solusinya adalah dengan menulis html,body(height:100%) dalam gaya pengguna, tetapi tidak ada jaminan bahwa itu akan selalu berhasil. Lebih dapat diandalkan untuk memeriksa apakah dokumen melebihi ketinggian jendela, dan jika tidak, pindahkan footer, jika tidak - tidak ada. Melompat tidak apa-apa, itu ada.

3) Opera - tidak ada lompatan (v. 12.02) saat halaman pertama kali dimuat, tetapi pemuatan ulang yang tergesa-gesa mungkin menunjukkan lompatan footer. Kalau tidak, ia berperilaku tidak kalah benarnya dengan Fx.

Nah, Anda harus secara khusus mengajari Chrome untuk berperilaku benar (dengan skrip) dan meluncurkan versi dalam formulir ini untuk ditampilkan. Oleh karena itu, bagian dalam skrip pengguna sedikit lebih rumit daripada yang diberikan dalam artikel.

Perlu diingat bahwa ini bukan implementasi penuh - ini tidak memperhitungkan, misalnya, kasus pengubahan ukuran jendela oleh pengguna. Anda juga dapat menemukan (dalam praktiknya) kombinasi perubahan ketinggian footer sebelum dan sesudah perpindahan, yang logikanya mulai gagal tanpa menimbulkan ketidaknyamanan. Kekurangan tersebut sengaja dibiarkan, karena tetap terjaga keseimbangan antara kompleksitas perbaikan dan sifat solusi yang bersifat sementara.

Hasilnya, kami mendapatkan skema operasi yang sepenuhnya bisa diterapkan, setidaknya untuk komputer desktop yang cepat. Jika perilaku footer yang salah terdeteksi, pengaturan “underFooter” harus dinonaktifkan.

Untuk halaman apa ini berguna?

Di situs web standar, tanpa gaya pengguna, bahkan halaman tanya jawab pendek pun akan berukuran lebih dari 1500 piksel, yang dalam banyak kasus tidak terlihat dengan monitor horizontal. Tetapi bahkan dengan monitor biasa, Anda sering menemukan halaman pengguna pribadi dengan tinggi sekitar 1300 piksel, di mana footer yang tidak dilampirkan muncul dengan segala kemegahannya. Jumlah halaman pada pengaturan pengguna juga tidak terlalu banyak.

Jika Anda menggunakan gaya pengguna ZenComment, gaya tersebut sangat mengurangi tinggi halaman yang diperlukan, dan skrip pengguna HabrAjax mungkin tidak menampilkan beberapa atau seluruh blok samping di sidebar. Oleh karena itu, dengan skrip dan gaya, efek footer yang tidak dilampirkan lebih sering diamati. Oleh karena itu, masuk akal jika perbaikan footer muncul di HabrAjax untuk pertama kalinya. Namun situs web biasa juga memiliki sejumlah halaman yang footernya berguna.

Apakah akan ada dukungan?

Perilaku situs selama setahun terakhir menunjukkan bahwa pengembang (dan juga manajemen) mulai memperkenalkan fitur-fitur yang sebelumnya hanya ada di skrip pengguna dan gaya pengguna. Misalnya, di awal tahun saya menulis di mana saya mengumpulkan banyak harapan kecil. Enam bulan kemudian, saya kembali ke sana dan dengan senang hati mencatat (tepat di teks; Anda dapat melihat “UPD” dan tanggalnya) bahwa sejumlah fitur yang digambarkan sebagai keinginan telah diterapkan ke dalam situs.

Selanjutnya, mari kita lihat “panah” dan bukan kotak untuk komentar penilaian. Mereka muncul di userils (“Prettifier”) sekitar 3 tahun lalu dan diadopsi ke ZenComment sekitar 2 tahun lalu. Sekitar 2-3 bulan yang lalu mereka muncul di situs. Seseorang mulai percaya bahwa setelah beberapa waktu panah-panah tersebut akan diberi jarak tertentu, seperti yang dilakukan di ZenComment (satu panah ke kiri nomor, yang kedua ke kanan) agar tidak meleset.

gaya pengguna

HabrAjax

Tambahkan tanda

Setiap perancang tata letak cepat atau lambat dihadapkan pada kebutuhan untuk menekan footer situs web ke bagian bawah halaman. Ada beberapa cara di Internet untuk mengatasi masalah ini. Saya akan menunjukkan kepada Anda beberapa di antaranya yang saya sendiri gunakan dalam praktiknya.

Markup html paling sederhana:

Metode #1

Footer didorong ke bawah dengan memposisikannya secara absolut dan meregangkan ketinggian blok induk (html, body, dan wrapper) hingga 100%. Dalam hal ini, blok konten perlu menentukan margin bawah yang sama dengan atau lebih besar dari tinggi footer, jika tidak, margin bawah akan menutupi sebagian konten.

* ( margin: 0; padding: 0; ) html, body ( tinggi: 100%; ) .wrapper ( posisi: relatif; tinggi minimum: 100%; ) .content ( padding-bottom: 90px; ) .footer ( posisi : mutlak; kiri: 0; lebar: 100%;

Metode #2

Footer ditekan ke bawah dengan menarik blok konten dan "induknya" ke ketinggian penuh jendela browser dan mengangkat footer ke atas melalui margin negatif (margin-top) untuk menghilangkan gulir vertikal yang muncul. Dalam hal ini, perlu untuk menunjukkan ketinggian ruang bawah tanah, dan itu harus sama dengan jumlah lekukan. Berkat properti box-sizing: border-box, kami mencegah kotak dengan kelas konten melebihi tinggi 100%. Artinya, dalam hal ini min-height: 100% + padding-bottom: 90px sama dengan 100% tinggi jendela browser.

* ( margin: 0; padding: 0; ) html, body, .wrapper ( tinggi: 100%; ) .content ( ukuran kotak: border-box; min-height: 100%; padding-bottom: 90px; ) . footer ( tinggi: 80 piksel; margin-atas: -80 piksel; )

Metode #3

Metode ini bagus karena, tidak seperti metode lainnya (kecuali metode ke-5), ketinggian footer tidak menjadi masalah. Di sini kita meniru perilaku tabel dengan mengubah blok pembungkus menjadi tabel dan blok konten menjadi baris tabel (masing-masing properti tampilan: tabel dan tampilan: baris tabel). Berkat ini, dan fakta bahwa blok konten dan semua wadah induknya disetel ke tinggi 100%, konten direntangkan hingga ketinggian penuh, dikurangi tinggi footer, yang ditentukan secara otomatis - emulasi tabel mencegah footer meluas melampaui ketinggian jendela browser.

*( margin: 0; padding: 0; ) html, isi ( tinggi: 100%; ) .wrapper ( tampilan: tabel; tinggi: 100%; ) .content ( tampilan: baris tabel; tinggi: 100%; )

Metode #4

Metode ini tidak seperti metode sebelumnya, dan kekhasannya adalah penggunaan fungsi CSS calc() dan satuan pengukuran vh, yang hanya didukung oleh browser modern. Di sini Anda perlu mengetahui ketinggian footer yang tepat. 100vh adalah tinggi jendela browser dan 80px adalah tinggi footer. Dan dengan menggunakan fungsi calc() kita mengurangi nilai kedua dari nilai pertama, sehingga menekan footer ke bawah.

* ( margin: 0; padding: 0; ) .content ( tinggi minimum: calc(100vh - 80px); )

Metode #5

Ini mungkin metode terbaik dari semua metode yang disajikan, tetapi hanya berfungsi di browser modern. Seperti pada metode ketiga, ketinggian footer tidak menjadi masalah.

* ( margin: 0; padding: 0; ) html, isi ( tinggi: 100%; ) .wrapper ( tampilan: fleksibel; arah fleksibel: kolom; tinggi: 100%; ) .content ( fleksibel: 1 0 otomatis; ) .footer (fleksibel: 0 0 otomatis; )

Metode #6

Seluruh perpustakaan untuk berbagai kasus (menggunakan Flexbox)

Vlad Merzhevich

Dalam jargon pengembang web, footer adalah bagian bawah situs, tempat penulisan hak cipta, kontak dipublikasikan, berbagai counter ditampilkan, dan informasi serupa. Biasanya, footer terletak setelah semua konten dan hanya terlihat saat halaman di-scroll. Dalam beberapa kasus, diinginkan untuk membuat footer selalu dapat diakses, berapapun tinggi halamannya, dan memasangnya di bagian bawah jendela browser.

Untuk melakukan ini, kita akan menggunakan properti position dan nilainya tetap. Dalam hal ini, elemen tetap berada di satu tempat, dan posisinya ditentukan oleh koordinat melalui properti top , right , bottom , left . Dalam kasus kami, cukup dengan menyetel nilai kiri dan bawah ke nol. Lebar elemen tetap sama dengan isinya, yang terlihat jelas jika Anda menambahkan warna latar belakang atau gambar, jadi Anda juga harus mengatur lebar menggunakan lebar menjadi 100% (contoh 1).

Contoh 1: Ruang Bawah Tanah Tetap

Hasil contoh ditunjukkan pada Gambar. 1.

Beras. 1. Footer di bagian bawah halaman

Internet Explorer 6 tidak mendukung nilai tetap, jadi contoh ini tidak akan berfungsi dengan benar di dalamnya. Untuk IE6 Anda harus menambahkan dua tag ke kode