Bagaimana untuk Mencipta Div yang Mengisi Ruang Antara Pengepala dan Pengaki Menggunakan Flexbox?

Patricia Arquette
Lepaskan: 2024-11-10 03:23:02
asal
257 orang telah melayarinya

How to Create a Div That Fills the Space Between Header and Footer Using Flexbox?

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>
Salin selepas log masuk

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;
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan