Bagaimana untuk Membesarkan Bekas DIV Bersarang untuk Menampung Anak-anaknya?

Peluasan Ketinggian dalam DIV Bersarang untuk Penginapan Kandungan Halaman

Apabila bekerja dengan struktur DIV bersarang, adalah perkara biasa untuk menghadapi cabaran untuk memastikan bahawa bekas utama diubah saiz secara dinamik untuk menampung DIV anaknya. Dalam senario khusus ini, matlamatnya ialah untuk memastikan #utama_kandungan DIV mengembangkan ketinggiannya seperti yang diperlukan untuk menempatkan item di dalamnya.

Untuk menangani isu ini, satu penyelesaian yang berkesan ialah memaksa pembetulan jelas sebelum menutup #kandungan_utama DIV. Ini memerlukan pemindahan
tag ke dalam DIV ini.

<code class="css">.clear {
  clear: both;
}</code>

Pendekatan Moden dengan Flexbox

Untuk penyelesaian yang lebih kontemporari, pertimbangkan untuk menggunakan Flexbox, kaedah reka letak yang lebih baharu dalam CSS3. Teknik ini membenarkan susun atur kotak yang fleksibel, di mana elemen disusun dalam lajur atau baris dengan saiz boleh disesuaikan dan saiz semula automatik.

Untuk melaksanakan Flexbox, tentukan bekas induk sebagai bekas fleksibel dan tetapkan arah lenturnya kepada kolumnar. Ini memastikan elemen kanak-kanak disusun secara menegak. Kemudian, tetapkan sifat flex pada bahagian kandungan utama untuk menunjukkan bahawa ia harus berkembang untuk menduduki ruang yang tersedia.

<code class="css">body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}</code>

<code class="html"><div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div></code>

Dengan menggabungkan teknik ini, anda boleh mencapai tingkah laku yang diingini dengan berkesan di mana #utama_kandungan DIV atau setara Flexbox modennya mengubah saiz secara dinamik untuk merangkumi semua DIV kanak-kanak, memberikan reka bentuk yang menarik dan responsif secara visual.

Atas ialah kandungan terperinci Bagaimana untuk Membesarkan Bekas DIV Bersarang untuk Menampung Anak-anaknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!