Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mencipta Div yang Mengisi Ruang Antara Pengepala dan Pengaki Menggunakan Flexbox?
Bagaimana untuk Mencipta Div yang Mengisi Ruang Antara Pengepala dan Pengaki Menggunakan Flexbox?
- Patricia Arquetteasal
- 2024-11-10 03:23:02258semak imbas
Mencipta Div untuk Mengisi Ruang Antara Div Pengepala dan Pengaki
Apabila beralih daripada reka letak berasaskan jadual kepada menggunakan div, mengekalkan jarak yang betul antara pengepala, kandungan dan pengaki elemen boleh menjadi satu cabaran. Berikut ialah penyelesaian berkesan menggunakan Flexbox:
Flexbox Solution
Flexbox membenarkan susun atur yang fleksibel dan responsif, memastikan pengepala dan pengaki kekal tetap sementara kawasan kandungan memenuhi ruang yang tinggal.
HTML:
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS:
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
flex: none;
}
main {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
flex: auto;
}
Dengan kod ini, elemen badan dipaparkan sebagai lajur kotak flex dan pengepala dan pengaki ditetapkan sebagai flex: tiada , menunjukkan bahawa mereka tidak seharusnya mengembang atau mengecut. Elemen utama, yang mengandungi kandungan, ditetapkan sebagai flex: auto, yang membolehkan ia mengambil semua ruang yang tinggal. Sifat overflow-y dan -webkit-overflow-scrolling memastikan kandungan boleh ditatal secara menegak dalam elemen utama.
Pendekatan ini membolehkan reka letak dinamik yang melaraskan kepada resolusi skrin yang berbeza, memastikan pengepala dan pengaki kekal dibetulkan semasa kandungan memenuhi ruang yang tersedia.
Atas ialah kandungan terperinci Bagaimana untuk Mencipta Div yang Mengisi Ruang Antara Pengepala dan Pengaki Menggunakan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!