Bagaimana untuk Mengisi Ruang Antara Header dan Footer dengan Divs Menggunakan Flexbox?

Mengisi Ruang Antara Pengepala dan Pengaki dengan Div

Apabila beralih daripada jadual kepada div untuk reka letak, cabaran biasa ialah menampung ketinggian kandungan dinamik sambil mengekalkan susunan yang diingini. Begini cara untuk mencipta div yang memenuhi seluruh ruang antara pengepala dan pengaki tetap.

Penyelesaian Flexbox

Reka letak fleksibel menyediakan penyelesaian yang elegan untuk senario ini, membenarkan elemen kontena (pengepala dan pengaki ) untuk mematuhi ketinggian tetap mereka sambil membolehkan kawasan kandungan melaraskan secara automatik. Persediaan ini menyerupai gelagat lalai apl mudah alih.

HTML

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

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

Dalam persediaan ini, div badan menjadi bekas fleksibel, dan elemen anak (pengepala, utama dan pengaki) menjadi item fleksibel. Sifat arah lentur menentukan arah item lentur, dalam kes ini, secara menegak (lajur).

Elemen pengepala dan pengaki ditetapkan kepada lentur: tiada, bermakna ia tidak akan mengecut atau membesar berbanding dengan dimensi awal mereka, memastikan mereka mengekalkan ketinggian tetap mereka. Elemen utama, sebaliknya, ditetapkan kepada lentur: auto, menunjukkan bahawa ia sepatutnya memenuhi ruang yang tinggal.

Selain itu, limpahan-y: tatal digunakan pada elemen utama untuk memperkenalkan tatal menegak apabila kandungan melebihi ruang yang ada. Sifat -webkit-overflow-scrolling: touch meningkatkan gelagat menatal pada peranti iOS.

Persediaan ini berkesan mencipta reka letak yang fleksibel dan dinamik di mana pengepala dan pengaki kekal pada kedudukan atas dan bawah masing-masing, manakala kandungan div dengan lancar memenuhi ruang di antara mereka, menampung ketinggian skrin yang berbeza-beza.

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Ruang Antara Header dan Footer dengan Divs Menggunakan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!