Halo, situs web pembaca blog yang terhormat. Kami melanjutkan topik blok tata letak, yang telah dimulai dan dilanjutkan dalam tiga artikel sebelumnya. Pada prinsipnya, kami telah berhasil membuat tata letak dua dan tiga kolom situs, dan kami bahkan berhasil mempertimbangkan nuansa untuk membuat tata letak karet.
Selain itu, dalam artikel pertama yang didedikasikan untuk tata letak situs (), beberapa konsep dasar webmastering dipertimbangkan, tanpa pemahaman yang akan cukup sulit untuk memahami nuansa.
Masalah apa yang muncul dengan tata letak situs kami
Hari ini kita akan mencoba memecahkan satu masalah kecil yang dapat muncul dengan tata letak yang sebelumnya dibuat oleh kita. Paling sering, situasi ini terjadi ketika dilihat pada monitor besar (dengan resolusi tinggi) dan ketika menampilkan halaman dengan sedikit informasi.
Dalam hal ini, mungkin ternyata futner tidak akan ditekan ke bagian bawah layar, tetapi akan terletak hampir di tengahnya di ketinggian, yang dalam banyak kasus itu akan terlihat jelek dan tidak estetika.
Namun, menurut saya, tekan footer ke bagian paling bawah tata letak situs yang Anda butuhkan, dan itu akan sangat benar dalam kasus ini ketika ketinggian halaman kurang dari ketinggian layar pengguna. Secara skematis, ini dapat diserahkan:
Itu. Perilaku masa depan yang benar untuk kasus sejumlah kecil informasi tentang halaman dan layar pengguna besar akan menjadi sebagai berikut:
Apa pun itu untuk mengimplementasikan, Anda perlu melakukan sejumlah manipulasi dengan kode tata letak kami. Selain itu, kami akan membuat perubahan tidak hanya pada file CSS style.css, tetapi juga dalam index.html, berisi kode HTML dan membentuk blok div. Tapi hal pertama yang pertama.
Misalnya, kami akan menggunakan tata letak situs tiga-terdampar yang dibuat oleh kami. Pada saat yang sama, index.html akan terlihat seperti ini:
Dan dalam file style.css, properti CSS berikut diresepkan:
Tubuh, html (margin: 0px; padding: 0px;) #Maket (lebar: 800px; margin: 0 otomatis;) #Header (latar belakang-warna: # c0c000;) #Left (Warna: 200px) ; Mengapung: kiri;) #right (lebar: 200px; warna latar: # ffff00; float: kanan;) #content (latar belakang-warna: # 8080FF; margin-kanan: 202px;) #footer (Latar belakang-warna: # ffc0ff; jelas: keduanya;)
Nah, tata letak itu sendiri tampak seperti ini:
Seperti yang Anda lihat, footer tidak akan ditekan ke bawah dan, oleh karena itu, tidak memenuhi persyaratan kami (selalu di bawah kolom bawah), sehingga Anda harus membuat penyesuaian pada kode. Semua hal yang sama dapat dilakukan untuk dua-trotoar, dan untuk tata letak karet juga. Metode universal.
Cara menekan pijakan ke bagian bawah tata letak situs
Jadi, kita perlu menggeser wadah div dengan footer ke bagian bawah layar. Untuk melakukan ini, pertama-tama Anda harus mengatur ketinggian seluruh halaman sama dengan seratus persen (itu akan menempati seluruh layar). Perlu untuk kemudian mengubah ukuran unit utama dengan tata letak hingga 100%.
Semua isi halaman situs ditempatkan di tag tubuh pembukaan dan penutupan dan oleh karena itu kita perlu ditambahkan ke style.css untuk tag tubuh properti CSS lain yang menentukan ketinggian 100%:
Tubuh, html (margin: 0px; padding: 0px; tinggi: 100%;)
Dalam penampilan, ini belum mempengaruhi, tetapi sekarang blog utama dapat diregangkan ke seluruh ketinggian layar. Itu. Itu semacam tahap persiapan.
Sifat utama CSS, jika Anda mau, Anda bisa melihat. Sekarang atur wadah untuk div, di mana seluruh tata letak kami disimpulkan, ketinggian minimum adalah 100%:
Saya juga ingin menyorotnya (div dengan id \u003d "maket"). Untuk melakukan ini, tanyakan padanya bingkai menggunakan properti batas yang sesuai ():
Properti Perbatasan: Padat 3px hitam memungkinkan Anda untuk mengatur bingkai padat (padat) tebal untuk wadah ini dalam tiga piksel hitam. Ini akan membantu untuk dengan jelas melihat bahwa wadah dengan tata letak membentang ke seluruh ketinggian layar bahkan dengan sejumlah kecil informasi tentang halaman:
Sekarang kita perlu membuat pijakan dari total wadah dan menempatkannya di bawah, segera setelah yang umum. Apa yang akan diberikan? Dan fakta bahwa akhirnya akan berkenan menuruni pijakan di tata letak, dan tidak akan ditekan ke kolom terpanjang. Dalam hal ini, index.html akan mengambil formulir berikut:
Harap dicatat bahwa paket dengan footer sekarang tidak di dalam wadah bersama (maket), dan oleh karena itu lebarnya sekarang tidak lagi diatur oleh properti CSS yang ditentukan untuk maket. Style.css Footer akan membentang lebar ke seluruh layar, tetapi masih akan terletak di bagian bawah layar, segera di bawah unit utama:
Tetapi sekali lagi ada masalah, untuk untuk melihat ruang bawah tanah, sekarang Anda harus menggulir layar di browser (Anda melihat bilah gulir pada yang ditampilkan).
Ternyata ternyata wadah utama (maket) mengambil seluruh ukuran layar (ini ditentukan oleh properti min-tinggi: 100%), dan footer terletak tepat di belakangnya dan untuk melihatnya sudah harus menggunakan gulir, yang tidak terlalu nyaman dan fungsional.
Dimungkinkan untuk mengatasi masalah ini dengan mengatur indentasi negatif untuk wadah div dengan footer sehingga bergeser ke atas ke jarak yang sama dengan tinggi. Dalam hal ini, wadah footer akan berjalan pada utama dan masuk ke ketinggian layar browser (I.E. Tidak perlu menggunakan gulir untuk melihatnya).
Tetapi untuk mengajukan lekukan negatif dari atas, Anda perlu mengetahui hal ini dengan tinggi kaki, dan kami masih belum mengetahuinya.
Oleh karena itu, pertama-tama atur wadah yang berisi ketinggian bawah tanah, meresepkan properti yang sesuai dalam gaya.css:
#footer (latar belakang-warna: # ffc0ff; jelas: keduanya; tinggi: 50px;)
Dan kemudian kami memintanya indentasi negatif terhadap ketinggian setara dengan tinggi badannya:
Ini akan memungkinkan ruang bawah tanah meningkat tepat pada ketinggiannya sendiri dan dengan demikian masuk ke layar browser (Anda sekarang dapat menghapus batas properti CSS: Padat 3px hitam dari aturan untuk maket sehingga ketebalan bingkai tidak mengganggu semua tata letak kami bersama dengan footer fit di layar ketinggian):
Seperti yang Anda lihat, sekarang bilah gulir di browser tidak muncul dan semua situs tata letak tiga untai kami berdasarkan pada tata letak blok ditempatkan dalam satu layar (dalam kasus sejumlah kecil informasi di halaman) dan memiliki Footer terletak di bagian paling bawah. Apa yang sebenarnya perlu kita lakukan.
Masukkan strut dan berkelahi dengan Internet Explorer
Tapi ada masalahyang akan muncul hanya ketika informasi pada halaman tata letak menjadi lebih dan dapat menghasilkan situasi ini:
Ternyata situasi dapat terjadi ketika informasi dalam salah satu kolom tata letak akan digunakan untuk footer, yang akan terlihat tidak indah. Ini terjadi karena indentasi negatif yang terkenal, yang kami memintanya dan yang membantu mengangkat ruang bawah tanah kami dengan memukul pada tata letak wadah utama.
Itu. Ternyata di bagian bawah layar adalah dua blok, tumpang tindih satu sama lain di area bawah tanah.
Solusi dari masalah ini adalah menambahkan wadah div baru yang baru (yang disebut speaker.) Dalam wadah utama tata letak kami (maket), ke tempat di mana blok dengan footer berada sebelumnya.
Mengatur tinggi wadah baru untuk wadah baru ini, sama dengan ketinggian ruang bawah tanah, kita dapat menghindari keberangkatan informasi dari wadah utama ke blok dengan footer. Kami menetapkan ID ini () wadah dengan nama rasporka dan sebagai hasil dari index.html dari tata letak tiga kolom kami mengambil formulir:
Dan dalam gaya.css menangis untuk ini (mendefinisikan ketinggian kontainer-strut ini sama dengan ketinggian ruang bawah tanah:
#rasporka (tinggi: 50px;)
Akibatnya, pijakan akan ditekan dari bawah bukan pada informasi yang terkandung dalam wadah utama (misalnya, teks di kolom tertinggi), dan suatu area dengan ruang bawah tanah yang sama dengan wadah strut yang tidak mengandung informasi apa pun .
Dengan demikian, kami menghindari memukul dan distorsi dalam tata letak tiga untai kami. Semuanya akan jelas dan indah (Chinno dan Noble):
Seperti yang saya sebutkan di atas, lebar lebih lanjut sekarang harus diatur secara terpisah, karena Wadah ini sekarang tidak termasuk dalam yang utama. Untuk melakukan ini, tambahkan ke file CSS properti tambahan untuk footer, memungkinkan Anda untuk menetapkan lebar dan menyelaraskannya di tengah layar secara horizontal.
Lebar masuk akal untuk mengatur lebar seluruh tata letak menggunakan properti lebar, dan leveling horizontal dapat dilakukan dengan cara yang sama seperti yang kami lakukan untuk seluruh tata letak pada tata letak blok.
Dengan demikian, kita perlu menambahkan properti tambahan untuk footer ID:
#footer (latar belakang-warna: # ffc0ff; hapus: keduanya; tinggi: 20px; margin-top: -20px; lebar: 800px; margin-kiri: otomatis; otomatis;)
Menggunakan lebar: 800px properti, 800 piksel diatur ke 800 piksel, dan dengan dua properti margin-left: Otomatis dan Margin-Right: Auto mengatur penyesuaian kiri dan kanan dari ruang bawah tanah secara otomatis, sebagai akibatnya Indentasi ini sama dan pahlawan kita selaras dengan tengah:
Yah, sepertinya lebih dari apa pun untuk ditingkatkan, tetapi itu tidak ada di sana. Seperti biasa, browser Internet Explorer favorit kami 6 sesuatu tidak memahami properti CSS yang digunakan oleh kami. Di browser ini (dan, mungkin, di beberapa orang lain juga), terlepas dari semua upaya kami, ruang bawah tanah tidak akan ditekan ke bawah, dan masih akan menempel pada kolom tertinggi dari tata letak situs.
Semua ini disebabkan oleh fakta bahwa (tidak mengerti properti min-tinggi: 100%, yang kami gunakan untuk mengatur ketinggian minimum unit utama sama dengan ketinggian layar.
Oleh karena itu, untuk mengatasi masalah ini, kita harus menerapkan apa yang disebut hack, memungkinkan untuk menjelaskan (pada jari-jari Anda) ke browser lama apa yang harus dilakukan. Sebelum daftar properti CSS untuk Maket, Anda harus memasukkan kombinasi berikut:
* Html #maket (tinggi: 100%;)
Aturan ini hanya akan diterapkan untuk browser Internet Explorer 6, sisanya tidak akan memperhitungkan dan melakukan.
Jadi, tampilan terakhir dari gaya.css dengan ditekan ke bagian bawah layar, footer akan menjadi sebagai berikut:
Tubuh, html (margin: 0px; padding: 0px; tinggi: 100%;) * html #maket (tinggi: 100%;) #Maket (lebar: 800px; margin: 100%;) # Header (latar belakang-warna: # c0c000;) #left (latar belakang-warna: # 00c0c0; lebar: 200px; float: float: float;) #right (lebar: 200px; float:) #content;) (Latar belakang-warna: # 8080FF; margin-kiri: 202px; margin-right: 202px;) #footer (latar belakang-warna: # ffc0ff; hapus: keduanya; tinggi: margin-atas: -50px; lebar: 800px; Margin-Left: Auto; Margin-Right: Auto;) #rasporka (tinggi: 50px;)
Nah, jenis akhir index.html diberi sedikit lebih tinggi. Semua, pada seri artikel ini didedikasikan untuk blok tata letak 2 dan 3 kolom tata letak yang tetap dan karet situs, dapat dipertimbangkan selesai.
Anda juga dapat menonton video "Bekerja dengan Tag Tag HTML":
Semoga sukses untukmu! Untuk pertemuan ambigu di situs web halaman blog
Anda mungkin tertarik
Block Layout - Buat tata letak dua kolom, tricolon dan karet untuk situs tersebut 
Tata Letak Div \u200b\u200b- Buat blok untuk tata letak dua panel dalam HTML, tentukan dimensinya dan atur posisi dalam CSS
Siapa pun yang terbiasa dengan halaman situs web yang didekorasi penuh lebih memilih penampilan "dipaku" (menempel, lengket) ke bagian bawah pijakan. Tetapi ada dua masalah di Internet: Infeksi Bawah Input Founders dan Unfit (ke bagian bawah jendela). Misalnya, ketika kita membuka halaman pendek tipe habrahabr.ru/settings/social - segera menyerang bahwa informasi yang dirancang untuk berada di bagian bawah jendela tampilan menempel pada konten dan berada di bagian atas, dan bahkan di bagian atas jendela saat di bawah kosong.
Jadi, bukannya.
Manual ini untuk verteks pemula akan menunjukkan bagaimana dalam 45 menit untuk membuat footer "dipaku", memperbaiki kekurangan bahkan edisi yang dihormati sebagai habr, untuk bergerak bersamanya sebagai pemenuhan proyeknya yang menjanjikan.
Mari kita lihat implementasi satu spesies footer paku yang diambil dari jaringan, dan mari kita coba memahami apa yang terjadi. css-tricks.com/snippets/css/sticky-footer.
CSS:
* (Margin: 0; Padding: 0;) HTML, Tubuh, #Wrap (Tinggi: 100%;) Tubuh\u003e #Wrap (Tinggi: Auto; Tinggi-Tinggi: 100%; 150px; ) / * Harus sama dengan footer * / #footer (Posisi: relatif; margin-top: -150px; / * Nilai negatif dari tinggi footer * / tinggi: 150px; baik:) / * Clear Fix * / * .ClearFix: setelah (konten: "." Tampilan: blok; tinggi: 0; hapus: keduanya; visibilitas: tersembunyi;) .clearfix (Display: inline-block;) / * html. clearfix (tinggi: 1%;) .clearfix (display: blok;) / * ujung hide dari IE-Mac * /
Html:
Mari kita mulai dengan teorinya
Implementasi yang biasa dari footer paku didasarkan pada properti yang unik untuk CSS2, bahwa elemen-elemen adalah keturunan langsung Tubuh. - Mendukung tingginya persentase ( tinggi: 100% atau yang lain) relatif ke jendela, jika semua orang tua mereka juga memiliki tinggi persentase, dimulai dengan tag Html.. Sebelumnya, tanpa dokter, dan sekarang dalam mode Quirks, persentase ketinggian elemen didukung pada tingkat apa pun, dan di dokter modern - hanya dalam persentase elemen. Karena itu, jika kita melakukan blok konten (sebut saja #layout.) memiliki tinggi 100%, itu akan memiliki gulir, seolah-olah itu adalah jendela. Semua (streaming) ditempatkan di dalamnya, kecuali untuk futur dan mungkin Heder.Footer ditempatkan setelah blok ini dan membuatnya 0 piksel tinggi. Secara umum, Anda bisa mengikuti #layout. letakkan sebanyak blok, tetapi mereka semua harus dengan ketinggian 0 piksel, atau di luar aliran dokumen (bukan posisi: Statis.). Dan ada satu fokus penting yang biasanya digunakan. Tidak perlu membuat ketinggian 0. Anda dapat membuat ketinggian tetap, tetapi dari unit utama untuk mengurangi dengan mengorbankan properti. margin-bottom: - (tinggi);.
Berbicara dengan bahasa manusia, gaya itu dibuat kosong "saku" dari bawah, yang diinvestasikan di footer, dan selalu ternyata atau ditelanjangi ke batas bawah jendela, atau ke batas bawah dokumen, jika Dokumen lebih tinggi dari ketinggian jendela. Di internet dan di Habré ada banyak implementasi lebih lanjut, dengan berbagai pekerjaan yang berhasil di semua browser. Kami terus membangunnya sendiri, menggunakan tata letak Habra sebagai "pekerja keras".
Karena bagian bawah blok #layout. - Ini adalah saku, itu harus kosong yang tidak menampilkan objek halaman. Dan di sini kita bertemu dengan batasan lain - kita tidak bisa membuat saku kosong dengan biaya lapisan. di #layout.Karena itu akan menjadi lebih dari 100%. Tidak akan menyelamatkan I. batas. - Kekosongan perlu dilakukan oleh sifat-sifat elemen bersarang. Plus, perlu untuk memastikan bahwa perlu untuk memastikan bahwa batas elemen apung berada di bawah batas, yang dilakukan, misalnya, oleh blok
Mari kita lihat struktur halaman-halaman eksperimen kita. Untuk melakukan ini, paling mudah untuk mengungkapkan jendela Firebug atau jendela yang sama (alat pengembang "(Ctrl-F12)) di Chrome.
Mari kita beralih ke pekerja
Apa yang Anda terlihat kerugian lapisan Dalam hal implementasi efek footer dipaku? Kami melihat itu1) 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" ); Jika (TOPL && LAY) // Banner - di dalam layer cetakan 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 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).
Dalam HTML5, beberapa tag baru diperkenalkan untuk struktur kode: