Bagaimana untuk Mencipta Div yang Mengisi Ruang Antara Pengepala dan Pengaki Menggunakan Flexbox?-tutorial css-php.cn

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

Patricia Arquette

Lepaskan： 2024-11-10 03:23:02

asal

231 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!