Bagaimana untuk Mengisi Ruang Menegak Baki dalam Div Pembungkus dengan Div Kedua Menggunakan CSS?

Menggunakan CSS untuk Mengisi Ruang Menegak

Soalan:

Anda mempunyai reka letak dengan div #wrapper yang mengandungi #first dan div #kedua. Anda perlu mengisi ruang menegak yang tinggal #wrapper di bawah #first dengan #second, hanya menggunakan CSS.

Penyelesaian:

1. Reka Letak Flexbox:

   • Tetapkan div pembalut untuk dipaparkan: flex dan flex-direction: lajur. Ini menyediakan reka letak menegak.
   • Tetapkan ketinggian pembalut kepada 100%.

2. Kawalan Ketinggian:

   • Tetapkan ketinggian div pertama kepada nilai tetap (mis., 50px) untuk memastikan ia tidak mengembang.

3. Flex- Grow Property:

   • Gunakan sifat flex-grow pada div kedua. Sifat ini membolehkan div kedua berkembang secara menegak dan mengisi ruang yang tinggal. Tetapkan flex-grow kepada 1 untuk menjadikannya fleksibel.

Contoh Kod:

<code class="css">html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
}

.second {
  flex-grow: 1;
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Ruang Menegak Baki dalam Div Pembungkus dengan Div Kedua Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!