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>

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

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Div Menduduki Ketinggian Ibu Bapa yang Tinggal Tanpa Kedudukan Mutlak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!