Bagaimanakah Saya Boleh Mencipta Susun Atur Satu Lajur Berpusat dengan Pengepala dan Pengaki dalam Reka Bentuk Web?

Reka Bentuk Lebar Tetap Berpusat Satu Lajur dengan Pengepala dan Pengaki

Dalam bidang reka bentuk web, mencapai reka letak satu lajur dengan kandungan berpusat yang merentangi keseluruhan skrin sambil memuatkan elemen pengepala dan pengaki boleh menjadi usaha yang penting. Soalan ini menyelidiki beberapa pendekatan dan kesesuaian mereka untuk keperluan reka bentuk ini.

Pendekatan 1: Tiga Lajur dengan Pusat Faux

Mencipta tiga lajur, dengan margin dilaraskan ke tengah lajur tengah dan elemen tengah palsu untuk pengembangan ketinggian, telah dicadangkan. Walau bagaimanapun, ia memperkenalkan lajur sisi kosong yang tidak perlu, menafikan kepraktisannya.

Pendekatan 2: Lajur Tunggal dengan Jidar Auto dan Offset Atas

Menempatkan satu lajur dengan jidar automatik untuk pemusatan dan offset atas boleh mencapai kesan yang diingini. Walau bagaimanapun, memanjangkan lajur untuk menduduki ketinggian yang tinggal memerlukan penerokaan lanjut.

Penyelesaian: Flexbox

Untuk pelayar kontemporari, kemunculan Flexbox menawarkan penyelesaian yang mudah. Flexbox menyediakan kawalan reka letak yang komprehensif, membolehkan penciptaan reka bentuk satu lajur dengan mudah.

Menggunakan JavaScript tidak digalakkan. Sebaliknya, kami mengesyorkan kod CSS berikut:

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>

Penyelesaian ini menggunakan Flexbox untuk mencipta reka letak satu lajur, dengan elemen #utama menduduki baki ketinggian (tolak pengepala dan pengaki). Gaya pengepala dan pengaki pilihan boleh disesuaikan mengikut keperluan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Susun Atur Satu Lajur Berpusat dengan Pengepala dan Pengaki dalam Reka Bentuk Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!