Bagaimanakah Saya Boleh Membuat Reka Letak CSS Ketinggian Minimum 100% dengan Pengepala dan Pengaki Tetap?

100% Min Height CSS Layout: Membuka Kunci Ketinggian Kandungan Adaptif

Mencapai susun atur yang lancar dan boleh disesuaikan dengan elemen mengekalkan ketinggian minimum merentas pelbagai konteks penyemak imbas boleh menjadi satu cabaran. Tutorial ini memfokuskan pada teknik reka letak CSS yang menonjol untuk menangani isu ini, terutamanya dalam senario yang melibatkan pengepala dan pengaki ketinggian tetap.

Proposisi Ketinggian Min

Batu asas kepada pendekatan ini terletak pada menetapkan ketinggian minimum 100% kepada elemen bekas, dilambangkan dengan #container. Ini memastikan bahawa walaupun kandungan tidak mencukupi untuk mengisi ruang yang tersedia, elemen mengembang untuk menduduki keseluruhan ketinggian antara pengepala dan pengaki.

Kedudukan Relatif

Kedudukan Relatif Elemen #container menganggap kedudukan relatif, yang membolehkan elemen #footer kekal di bahagian bawahnya, tanpa mengira panjang kandungan. Ketinggian minimum 100% yang dinyatakan sebelum ini menjamin kedudukan yang betul, walaupun apabila kandungan memaksa #bekas untuk mengembang secara menegak.

Pelarasan bahagian bawah padding

Memandangkan #content tidak lagi sebahagian daripada aliran biasa disebabkan oleh kedudukan relatif, kami menggunakan padding-bottom untuk mencipta ruang bagi #footer mutlak. Pelapik ini menyumbang kepada ketinggian tatal elemen, menghalang pengaki daripada bertindih kandungan di atasnya.

Contoh Penggunaan

Kod CSS berikut menunjukkan teknik reka letak ini:

div#container {
    position: relative;
    min-height: 100%;
}

div#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

div#content {
    padding-bottom: 5em; /* Provide space for the footer */
}

Responsif Penyesuaian

Apabila tetingkap penyemak imbas diubah saiz atau saiz teks berubah, reka letak menyesuaikan diri dengan lancar. Bekas melaraskan ketinggiannya untuk menampung kandungan, manakala pengaki kekal berlabuh ke bahagian bawah. Ini memastikan pengalaman yang konsisten dan menyenangkan secara visual untuk pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Reka Letak CSS Ketinggian Minimum 100% dengan Pengepala dan Pengaki Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!