Mengapa Footer Saya Ada di Tengah Halaman Web Saya?

Footer situs web dapat muncul di tengah halaman Web dan tidak di bagian bawah karena sejumlah alasan. Salah satu yang paling umum adalah bahwa konten situs web kecil dan footer didorong ke atas. Wadah "" dengan footer mungkin dikodekan salah, margin atau padding mungkin salah dan properti "float" bisa salah.

Posisi Footer

Properti "posisi" footer CSS menentukan di mana footer diposisikan di halaman Web dalam kaitannya dengan elemen halaman lainnya, seperti header dan konten tubuh utama. Lima jenis penentuan posisi adalah posisi statis, posisi tetap, posisi relatif, posisi tumpang tindih, dan posisi absolut. Penentuan posisi absolut dalam footer digunakan sehingga elemen footer tidak berperilaku dalam kaitannya dengan elemen lainnya. Tambahkan "position: absolute;" pengkodean di dalam tag "#footer" bracket "{" dan "}". Selain itu, tambahkan "bawah: 0;" di baris langsung di bawah kode "posisi". Sekarang footer diposisikan benar-benar di bagian bawah halaman "DIV" kontainer.

Lebar dan Tinggi Footer

Properti footer width dan height mungkin mengganggu posisi footer. Jika footer terlalu besar, maka dibutuhkan terlalu banyak ruang di bagian bawah halaman Web. Di dalam tag braket "#footer" dari "{" dan "}" tercantum "width: Xpx;" dan "tinggi: Xpx;" coding. Ubah lebar menjadi "100%" untuk menjadikan footer selebar konten situs web lainnya. Ubah ketinggian menjadi ukuran piksel yang diinginkan, seperti "60px" atau "75px." Dua perubahan ini dapat berkontribusi pada footer yang didorong ke bawah halaman Web.

Margin dan Padding

Margin dan padding coding dapat mengganggu posisi footer. Ketika margin footer terlalu sempit atau padding terlalu lebar, posisi footer bergeser dan dapat bergerak ke tengah halaman Web. Salah satu solusi mudah adalah dengan menghapus margin dan padding sepenuhnya, sehingga properti footer sesuai dengan sisa pengkodean. Temukan properti "#footer" di pengkodean halaman Web. Di dalam tanda kurung tanda "{" dan "}" terdapat "margin: Xpx Xpx Xpx Xpx;" dan "padding: Xpx Xpx Xpx Xpx;" coding. Sekarang margin footer dan padding ditentukan oleh tag "#body" dan "#container" di bagian atas halaman Web. Hapus kedua baris pengkodean dan segarkan halaman Web.

Tata Letak Kontainer

Footer situs web adalah salah satu elemen yang diposisikan dalam tata letak wadah DIV keseluruhan. Ketika properti tata letak kontainer tidak benar, itu dapat mempengaruhi posisi footer di halaman Web. Di dalam tag tanda kurung "#container" dari "{" dan "}" adalah properti "tinggi" dan "posisi" yang sama. Ubah "tinggi" menjadi 100% dan ubah "posisi" menjadi relatif. Tambahkan baris baru pengkodean ke "#container" dan ketik "min-height: 100%;", yang memberikan seluruh tata letak kontainer tinggi minimum baru. Sekarang seluruh halaman Web akan tetap berada pada ketinggian layar penuh terlepas dari jumlah konten. Posisi relatif juga berinteraksi secara positif dengan posisi absolut dari footer.