Bagaimanakah saya boleh menggunakan Flexbox untuk mencipta DIV yang mengisi ruang antara pengepala dan pengaki?-tutorial css-php.cn

Bagaimanakah saya boleh menggunakan Flexbox untuk mencipta DIV yang mengisi ruang antara pengepala dan pengaki?

Linda Hamilton

Lepaskan： 2024-11-08 12:45:02

asal

728 orang telah melayarinya

How can I use Flexbox to create a DIV that fills the space between a header and footer?

Mewujudkan DIV untuk Mengisi Ruang Antara Pengepala dan Pengaki DIV

Apabila mereka bentuk reka letak tapak web, selalunya diingini untuk mempunyai pengepala, pengaki, dan kawasan kandungan yang mengalir dengan lancar. Untuk tujuan ini, DIV menawarkan fleksibiliti yang lebih besar berbanding dengan jadual tradisional.

Untuk memastikan pengaki kekal di bahagian bawah halaman dan kandungan DIV melaraskan secara dinamik untuk mengisi ruang antara pengepala dan pengaki, penyelesaian mudah terletak dalam menggunakan Flexbox.

Pelaksanaan Flexbox

Flexbox menyediakan satu cara untuk menyusun elemen pada halaman, membenarkan ia mengalir dalam kedua-dua baris dan lajur. Dalam kes kami, kami mahu reka letak mengalir dalam lajur, dengan pengepala dan pengaki melekat pada kedudukan atas dan bawah masing-masing.

Struktur HTML kekal mudah, dengan pengepala, kandungan utama dan pengaki:

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

Salin selepas log masuk

CSS kemudiannya boleh digunakan sebagai berikut:

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;
}

Salin selepas log masuk

Penjelasan

arah lentur: lajur menetapkan kotak lentur untuk menyusun anaknya secara menegak.
lentur: tiada pada pengepala dan pengaki menghalang mereka daripada mengambil lebihan ruang.
limpahan-y: tatal membolehkan tatal menegak dalam kawasan kandungan utama, memastikan kandungan halaman sesuai dalam ruang yang tinggal.
-webkit-overflow-scrolling: sentuh mengoptimumkan tingkah laku menatal untuk peranti sentuh.
flex: auto membenarkan kawasan kandungan utama mengisi ruang yang tinggal di antara pengepala dan pengaki secara dinamik, tanpa mengira skrin resolusi.

Pertimbangan Tambahan

Jika kandungan melebihi ruang yang tersedia, bar skrol menegak akan muncul dalam kawasan kandungan utama.

Dengan menggunakan Flexbox, anda boleh membuat reka letak dengan mudah di mana kandungan menyesuaikan diri secara dinamik untuk mengisi ruang antara pengepala dan pengaki tetap, menghasilkan reka bentuk yang responsif dan menarik secara visual.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggunakan Flexbox untuk mencipta DIV yang mengisi ruang antara pengepala dan pengaki?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!