Bagaimana untuk Membuat Ketinggian DIV Berkembang dengan Kandungannya?

Cara Membuat Ketinggian DIV Berkembang dengan Kandungannya

Soalan ini berkaitan dengan pengembangan ketinggian DIV untuk menampung DIV dalamannya sementara mengekalkan struktur bekas DIV. Untuk mencapai tingkah laku yang diingini ini, adalah penting untuk melaksanakan pengubahsuaian pada reka letak CSS.

Satu pendekatan melibatkan penambahan "jelas: kedua-duanya;" harta sebelum menutup DIV #utama_kandungan. Peraturan CSS ini mengarahkan penyemak imbas untuk mengabaikan sebarang elemen terapung sebelumnya, memastikan #main_content mempunyai keseluruhan lebar yang tersedia dalam DIV bekas. Selain itu, anda boleh mengalihkan
elemen ke dalam #main_content DIV dan tetapkan CSSnya seperti berikut:

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

Penyelesaian Alternatif Menggunakan Flexbox

Alternatif yang lebih moden ialah menggunakan Flexbox, reka letak CSS3 mod yang membolehkan susun atur yang fleksibel dan responsif. Dalam pendekatan ini, peraturan CSS berikut boleh digunakan:

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

Struktur HTML menggunakan Flexbox:

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

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

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

Pendekatan Flexbox di atas mencipta reka letak responsif di mana bahagian kandungan akan berkembang secara automatik untuk mengisi ruang menegak yang tersedia sambil mematuhi ketinggian elemen dalamannya.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Ketinggian DIV Berkembang dengan Kandungannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!