Bagaimana untuk Membuat Reka Letak CSS Satu Lajur Tinggi Penuh dengan Pengepala dan Pengaki?

Mewujudkan Reka Letak Lajur Tunggal berasaskan CSS dengan Pengepala dan Pengaki

Dalam bidang reka bentuk susun atur CSS, cabaran untuk mencipta susun atur lajur tunggal lebar tetap yang merentangi keseluruhan ketinggian halaman, tidak termasuk pengepala dan pengaki, boleh ditemui. Untuk memenuhi keperluan ini, pelbagai pendekatan telah dikemukakan, masing-masing dengan kelebihan dan kelemahannya yang unik.

Nasib baik, dalam pelayar moden (2015 dan seterusnya), penyelesaian yang mudah dan boleh dipercayai boleh diakses menggunakan hartanah display:flex . Pendekatan ini menghapuskan keperluan untuk JavaScript dan menyediakan alternatif yang bersih dan cekap.

Penyelesaian menggunakan display:flex

Untuk melaksanakan reka letak dengan display:flex, ikuti ini langkah:

1. Tetapkan kedua-dua elemen html dan badan supaya mempunyai ketinggian 100%, tiada pelapik dan tiada margin.
2. Gunakan sifat paparan:flex dan flex-direction:lajur pada elemen badan. Ini akan menyusun elemen anak secara menegak.
3. Buat elemen #utama dan tetapkan sifat flex-grownya kepada 1. Ini akan menyebabkan elemen mengembang untuk mengisi ruang menegak yang tinggal.
4. Gunakan sifat CSS ketinggian min dan latar belakang untuk menggayakan pengepala dan pengaki seperti yang dikehendaki.

Contoh Kod

html, body {height:100%; padding:0; margin:0; width:100%;}
body {display:flex; flex-direction:column;}
#main {flex-grow:1;}

/* optional */
header {min-height:50px; background:green;}
#main {background:red;}
footer {min-height:50px; background:blue;}

<header>header</header>
<div>

Dengan menggunakan teknik ini, adalah mungkin untuk mencipta reka letak satu lajur yang memenuhi kriteria yang ditetapkan, memastikan keserasian dengan penyemak imbas moden.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Reka Letak CSS Satu Lajur Tinggi Penuh dengan Pengepala dan Pengaki?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!