Bagaimana untuk Menjadikan Div Menduduki Ketinggian Ibu Bapa yang Tinggal Tanpa Kedudukan Mutlak?

Jadikan Div Menduduki Baki Ketinggian Ibu Bapa Tanpa Kedudukan Mutlak

Dalam HTML/CSS, anda sering menghadapi senario di mana div kanak-kanak perlu menduduki baki ketinggian bekas induknya tanpa menetapkan ketinggian tertentu secara eksplisit. Mari kita mendalami masalah ini dan kemungkinan penyelesaiannya.

Pertimbangkan kod HTML/CSS berikut:

<div>
<pre class="brush:php;toolbar:false">#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

Di sini, div "bawah" harus menduduki ruang putih di bawah " naik" div.

Penyelesaian

Terdapat beberapa kaedah untuk dicapai ini:

Grid:

.container {
  display: grid;
  grid-template-rows: 100px;
}

Flexbox:

.container {
  display: flex;
  flex-direction: column;
}
.container .down {
  flex-grow: 1;
}

Kira tion:

.container .up {
  height: 100px;
}
.container .down {
  height: calc(100% - 100px);
}

Limpahan:

.container {
  overflow: hidden;
}
.container .down {
  height: 100%;
}

Nota:

• Untuk penyemak imbas yang menyokong CSS Grid dan Flexbox, penyelesaian ini menyediakan pendekatan yang lebih elegan.
• Kaedah "Limpahan" boleh berguna apabila bekas induk mempunyai ketinggian tetap. Walau bagaimanapun, ia boleh menyebabkan gelagat menatal yang tidak dijangka.