Bagaimana dengan Footer CSS Tekan ke bagian bawah jendela browser. Cara memaksakan footer mengambang dengan benar ke bagian bawah halaman yang menunjukkan tag footer ini

Mari kita beralih ke pekerja

Apa yang Anda terlihat kerugian lapisan Dalam hal implementasi efek footer dipaku? Kami melihat itu
1) Footer di situs ada di dalam blok dengan ID \u003d tata letak, yang tidak memiliki tingginya persentase. Menurut teori, dia, orang tua dan blok konten. Terus-kiri diperlukan untuk menempatkan ketinggian 100%. Dengan yang terakhir, timbul masalah - itu tidak disesuaikan untuk ini. Akibatnya, tidak ada cukup blok yang diduga atau footer tidak berada di level. Bahkan,
2) Variabel Ketinggian Fetter (tergantung pada jumlah item dalam daftar dan pada ukuran font, itu tidak terlihat dari HTML, tetapi dari CSS). DAN
3) lebih #layout. Ada unit periklanan dari ketinggian tetap 90px;
4) Tidak ada blok leveling di footer, atau secara umum) di blok #layout. (Ada, tetapi di atas blok .rotated_posts.; Namun, mungkin harus dikaitkan dengan futur).

Item 4 - Anda harus menggambar skrip.
Poin ketiga untuk mencari tahu, itu akan tampak, hanya dengan menambahkan #layout (margin-top: -90px;) tetapi ingat bahwa blok ini mungkin tidak - itu ditekan oleh pemotong banner, atau pengiklan tiba-tiba memutuskan untuk tidak menunjukkan . Ada sejumlah halaman halaman di mana tidak. Karena itu, kecanduan margin-top. Dari unit periklanan - ide yang buruk. Jauh lebih baik - letakkan di dalam #layout. - Maka dia tidak akan mengganggu apa pun.

Item pertama adalah dilahirkan secara umum diperoleh, perlu untuk menempatkan unit fetter di bawah #layout.. Namun, dengan JavaScript, Anda dapat menerapkan skema footer lainnya yang tersebar, tetapi dalam hal apa pun Anda memerlukan JS atau awalnya tata letak yang tepat untuk dilakukan tanpanya.

Karena kita tidak bisa lebih kuat dari velocher terbaru dari situs, "dimasukkan" pijakan di dalam konten, menunda gagasan penempatan kaki yang tepat di situs masa depan Anda (yang akan menjadi "pendingin" habra!), Dan HABR akan membubarkan javascript (skrip pengguna) ke status yang tepat. (Saya akan segera mengatakan, saya tidak menyalahkan bukan seorang ahli baya, bukan penembak, dan jenis situs, tentu saja, mendefinisikan keputusan strategis manajemen proyek.) Jadi kami tidak akan mencapai ideal, karena dalam Dua kedua pertama dalam proses mengunduh halaman akan dengan tata letak yang tidak teratur. Tetapi bagi kami adalah konsep dan kesempatan untuk melampaui situs web paling populer di dunia Aytishnikov.

Oleh karena itu, di situs skrip yang diinginkan (awal, pada akhir pemuatan halaman) Kami akan menulis transfer blok iklan dan futur ke tempat yang diinginkan. (Di muka ke fakta bahwa karena skrip pengguna, solusinya akan lebih sulit daripada bersih.)
Var dq \u003d fungsi (q) (return document.queryselector (q);) // untuk mengurangi var topl \u003d dq ("# topline"), lay \u003d dq ("# tata letak"), foot \u003d dq ("# footer" ); IF (TOPL && LAY) // Banner - di dalam LAY.INSERTREFLE CONTENT Block (TOPL, lay.firsstchild); if (lay && foot && lay.nextsibling) // transfer forher lay.parentnode.insertbefore (footer, lay.nextSibling);
Tempatkan blok di tempat - sekarang tetap untuk menetapkan properti yang diperlukan ke item. Ketinggian Fututor harus diminta pasti, hanya karena kita sudah mengetahuinya pada saat skrip pengguna (akhir pemuatan halaman). Karena titik operasi pengguna, seperti yang telah disebutkan di atas, perjalanan tampilan lebih lanjut pada halaman tidak bisa dihindari. Bisakah Anda mencoba membuat "wajah baik", tetapi dengan "permainan buruk"? Untuk apa? "Game Buruk" dari situs ini memungkinkan Anda untuk membuat konsep tanpa hasrat super, yang akan cukup untuk menilai kualitas dan tidak akan dibutuhkan dengan "permainan yang tepat" pada proyeknya.
Jika (kaki) (// bloke equalizer

Di footer h.apnd_el (CLSS: "Clear", appendto: footer)); var foothot \u003d kaki.offsetheight; // ... dan ukur ketinggian footer) jika (topl && lay && footer && lay.nextsibling) (// penyelarasan dari ketinggian yang diinginkan dalam konten ("leauut") h.apnd_el ((clss: " ", CSS :( Tinggi: (Footh || 0) +" PX "), Appendto: Lay.Style.MinHeight \u003d" 100% "; h.Addrules (" # tata letak (margin-bottom: " + Footh + "PX! PENTING) HTML, Tubuh (Tinggi: 100%)");)
Di sini memungkinkan diri untuk menerapkan fungsi yang ditulis sendiri h.apnd_el.melakukan hal yang sama seperti di jquery -
$("") .Css ((Tinggi: Footh || 0)). Appendto ($ (Footer))
Dan selanjutnya - fungsi khas lain untuk menerapkan aturan CSS - h.Addrules.. Di sini tanpanya tidak dapat dilakukan, karena Anda perlu mendeklarasikan aturan dengan " ! Penting."- Hanya karena fitur-fitur prioritas gaya dari skrip pengguna.

Dengan potongan kode ini, kami akan dapat melihat juggling footer dalam skrip pengguna (setelah melompat ke bawah) dan sepenuhnya menyadari cara membangun tata letak halaman. Gunakan desain jumping setiap hari - tidak menyenangkan, jadi disarankan untuk membuatnya secara eksklusif untuk demonstrasi dan pengujian. Dalam skrip pengguna habrajax, saya menginstal skrip serupa dengan menutupnya dengan konfigurasi "underfooter" (atur "centang" dalam daftar pengaturan sebelum "dipaku ke bagian bawah footer"), dimulai dengan versi 0.883_2012-09 -12.

Apakah membeli kebutuhan untuk memperbarui gaya zencomment jika dipasang? Ya, mempengaruhi. Karena rantai gaya kompleks, di mana gaya dimasukkan oleh pengguna, memiliki prioritas yang lebih rendah, saya harus memperbaiki pengguna dengan benar kemampuan. Bekerja dengan sepak bola kuku. Jika Anda tidak memperbarui pengguna (hingga 2.66_2012-09-12 +) - footer akan bekerja secara tidak akurat.

Blok memutar_post. (Tiga pos populer dari masa lalu) terlihat lebih logis untuk footer, jadi dalam skrip nyata itu juga ditransfer ke footer.

Item kedua (dari daftar kekurangan Liestone) - Alasan murni untuk habra (usercript tidak termasuk dan mengulangi sebagian sebelumnya).

Halaman memiliki masalah yang mengganggu footer paku pada CSS murni adalah ketinggian pijakan yang tidak terdefinisi tergantung pada ukuran font default di browser. Untuk mengimplementasikan korsor pada CSS, Anda perlu memilih ketinggian relatif dari font, tetapi mereka mungkin tidak berfungsi jika komputer pengguna tidak akan disediakan di komputer pengguna. Oleh karena itu, solusinya harus mencakup JavaScript yang dapat disesuaikan dengan transisi (transisi) memperkirakan posisi footer untuk tepat. Atau, melihat penerimaan keputusan yang dilakukan pada skrip pengguna pada platform yang berbeda, membuat instalasi yang dihitung dari footer paku - pengamatan pertama menunjukkan bahwa solusinya praktis.

Kesimpulan: Dimungkinkan untuk sepenuhnya mengatur tata letak pada Habré, tetapi untuk ini Anda memerlukan tata letak, jelas memahami perilaku tata letak, yang memiliki blok dalam urutan yang benar. (Sekarang pijakan dan spanduk atas "tidak ada di sana" dan tidak sedemikian rupa sehingga hanya gaya mendapatkan sepak bola kuku.) Anda dapat melakukannya tanpa JS, jika Anda meminta ketinggian futner di unit relatif, mengambil beberapa tempat di tempat. pada ketidakpastian font.

Penjualan

Jika Anda memasukkan Habrajax 0.883+, kita akan melihat pekerjaan "keduanya paling awal". Itu beradaptasi dengan skrip. Ini memungkinkan Anda untuk mengevaluasi seberapa besar halaman yang lebih baik memiliki sepak bola kuku dibandingkan dengan biasanya. Pengguna zencomment kompatibel dengan skrip, tetapi untuk operasi yang benar dari footer paku, Anda perlu menginstal versi Zencomment 2.66_2012-09-12 +.

Fakta tentang perilaku implementasi

Shamanisme dengan footer, gaya dan skrip adalah perdukunan (hanya diperkuat oleh teori). Di browser yang berbeda, sedikit perilaku berbeda, tetapi di beberapa tempat - tidak terduga. Tanpa skrip pengguna dan menghitung ulang blok, hasilnya akan menjadi yang lain. Itulah yang diberikan eksperimen dengan implementasi pada pengguna.

1) Firefox adalah kurangnya lompatan footer yang tak terduga. Aneh bahwa mereka tidak - gambar terjadi setelah penempatan di bawah ini.

2) Chrome - Dia mengejutkan "pengguliran berkeliaran" - ke halaman dengan periode kali per detik, ruang kosong ditambahkan di bagian bawah - sesuatu yang salah terjadi dengan perhitungan ketinggian. Ini diperlakukan dengan resep HTML, tubuh (tinggi: 100%) di pengguna, tetapi tanpa jaminan, yang akan selalu berfungsi. Handal - Periksa apakah dokumen tidak melebihi jendela tingginya, dan jika tidak melebihi, lalu pindahkan footer, sebaliknya - tidak ada. Dengan melompat - semuanya beres, itu.

3) Opera - tanpa lompatan (v. 12.02) Ketika halaman pertama kali dimuat, tetapi reboot tergesa-gesa dapat menunjukkan hop. Sisanya tidak kalah benar daripada fx.

Sedangkan, mereka harus secara khusus mengajarkan Chrome untuk berperilaku dengan benar (skrip) dan dalam formulir ini, roll out versi untuk ulasan. Oleh karena itu, plot di pengguna sedikit lebih rumit daripada artikelnya.

Ini harus diingatkan bahwa ini bukan implementasi penuh - tidak memperhitungkan, misalnya, kasus jendela daur ulang oleh pengguna. Anda dapat menemukan dan jarang (dalam praktik) kombinasi mengubah ketinggian fetter sebelum bergerak dan setelah itu, di mana logika akan mulai memberikan kegagalan yang tidak menyebabkan ketidaknyamanan. Kekurangannya secara sadar ditinggalkan, karena keseimbangan kompleksitas peningkatan dan waktu keputusan diamati.

Akibatnya, ternyata skema pekerjaan yang sepenuhnya efisien, setidaknya untuk komputer tetap cepat. Jika perilaku yang salah terdeteksi, konfigurasi "underfooter" harus dinonaktifkan.

Untuk halaman apa itu berguna?

Di situs standar, tanpa pemunangan, bahkan halaman balasan pendek lebih panjang dari 1500px, yang dalam banyak kasus dengan monitor spasi horizontal. Tetapi bahkan dengan monitor konvensional, halaman pribadi pengguna sekitar 1.300 piksel sering menemukan ketinggian sekitar 1.300 piksel, di mana footer yang tidak diperoleh muncul dalam semua kemuliaan. Tidak terlalu panjang dan sejumlah halaman di pengaturan pengguna.

Jika Anda menggunakan Zencomment Userstili, mereka sangat mengurangi ketinggian halaman yang diperlukan, dan skrip pengguna habraja mungkin tidak menunjukkan beberapa atau semua blok samping di Sidbar. Oleh karena itu, dengan skrip dan gaya, efek non-fetter terasa diamati. Oleh karena itu, logis bahwa futret muncul di Habrajax untuk pertama kalinya. Tetapi situs yang biasa memiliki sejumlah halaman, di mana footer dipaku akan bermanfaat.

Akankah dukungan didukung?

Perilaku situs selama setahun terakhir menunjukkan bahwa pengembang (dan oleh karena itu kepemimpinan) mulai menerapkan kemungkinan yang sebelumnya hanya ada pada skrip pengguna dan USERSTILES. Misalnya, pada awal tahun saya menulis di mana saya mengumpulkan banyak keinginan kecil. Dalam enam bulan, saya kembali ke dia dan ditandai dengan kepuasan (tepat dalam teks; Anda dapat membiasakan diri dengan "upd" dan tanggal) bahwa sejumlah peluang yang digambarkan sebagai keinginan telah diperkenalkan ke situs.

Selanjutnya, lihat "Panah" alih-alih kotak untuk estimasi komentar. Mereka muncul di pengguna Almalexa ("pretttigay") tahun 3 tahun yang lalu dan diadopsi dalam zencomment tahun 2 tahun yang lalu. 2-3 bulan yang lalu mereka muncul di situs. Ini mulai percaya bahwa setelah beberapa saat panah akan dipisahkan pada jarak tertentu, seperti yang dilakukan dalam zencomment (satu panah ke kiri angka, kanan kedua) lebih sedikit.

Karena itu, mungkin "footer dipaku" pada Habré bukan fantasi seperti itu, yang mana yang bisa tampak 3 tahun yang lalu.

Fitur lain dalam skrip habrajax yang munculselama 3 bulan terakhir (pemutusan dalam pengaturan):
* Bidang input autorent (di opera dapat memperlambat teks besar);
* hari dalam seminggu pada tanggal, kecuali "hari ini" dan "kemarin";
* Acara dalam pita, diminimalkan hingga 1 baris dan 2 karakter;
* Mengurangi kata-kata "HABR *" ke "χ ·" dan "χα";
* Tips tanggal dengan nomor artikel - Artikel itu dilaporkan, bulan dan tahun apa artikel sebelum dimuat, dengan angka dalam URL;
* Twisted "Posting serupa" hingga 2 kata. Screenshot pop-up "posting serupa" (menunjukkan 12 tautan, bukan 4).

Ini mimpi buruk! Mengapa ruang bawah tanah situs Anda "muncul" lagi dan menggeser desain? Apakah benar-benar tidak mungkin untuk menekan footer ke bagian bawah halaman dengan sesuatu? Konten atau batu bata setidaknya! Bata di monitor tidak prentangasi?

Jelas, lalu duduk dan tidak melakukan apa-apa sampai Anda membaca artikel kami sampai akhir.

Buat footer kanan untuk situs Anda

Banyak pemilik situs bertemu dengan masalah ini ketika footer halaman muncul "naik". Dan kemudian tidak jelas apa yang harus dilakukan. Paling sering, situs-situs dosa yang merugikan ini, Burner pada tangan ambulans, secara independen ( lingkari "Gila Pegangan") atau webmaster pemula.

Pada saat yang sama, pada pori-pori pertama kehidupan situs, tidak ada yang menakutkan terjadi. Dan idyll seperti itu berlanjut sampai konten memberikan "beratnya" ke ruang bawah tanah, tidak memberinya panjinya. Tetapi perlu menampung bahan yang lebih kecil di halaman, dan baru-baru ini "tenang" footer langsung naik, memimpin seluruh desain situs menjadi tampilan yang tidak pantas.

Untuk menghilangkan "cacat" ini dari template pemakaman, tidak perlu mengeluarkan uang untuk layanan webmaster. Paling sering, pengikut situs dapat ditempatkan sendiri. Pertimbangkan semua opsi yang mungkin untuk menghilangkan masalah seperti itu:

Metode Pertama

Cara pertama untuk "mengikat" ruang bawah tanah "ke bawah" halaman didasarkan pada CSS. Untuk memulainya, kami menyajikan kode contoh, dan kemudian mempertimbangkannya secara lebih rinci, ia diimplementasikan:

html (tinggi: 100%;) header, nav, bagian, artikel, samping, footer (tampilan: blok;) tubuh (tinggi: 100%;) #wrapper (lebar: 1000px; marjin: 0 otomatis; %; Tinggi: Otomatis! Penting; Tinggi: 100%;) #Header (Tinggi: 150px; Latar Belakang-Warna: RGB (0,255.255);) #Content (Padding: 100px; Latar Belakang - Warna: RGB (51.255.102) ;) #footer (lebar: 1000px; margin: -100px otomatis 0; tinggi: 100px; Posisi: relatif; latar belakang-warna: RGB (51,51,204););

Untuk merekatkan ruang bawah tanah ke bagian bawah tag halaman