Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Membuat Div Kanak-kanak Meregangkan Ketinggian Induknya dengan Ketinggian Tidak Diketahui?

Bagaimanakah Saya Boleh Membuat Div Kanak-kanak Meregangkan Ketinggian Induknya dengan Ketinggian Tidak Diketahui?

DDD
Lepaskan: 2024-12-18 02:54:10
asal
115 orang telah melayarinya

How Can I Make a Child Div Stretch to the Height of Its Parent with Unknown Height?

Meregangkan Div Kanak-Kanak untuk Memadankan Ketinggian Ibu Bapa

Apabila anda menghadapi situasi seperti yang diterangkan, di mana ketinggian div kanak-kanak sepatutnya sepadan induknya tetapi ketinggian induk tidak diketahui, penyelesaian boleh didapati melalui flexbox.

Untuk mencapai menegak penskalaan div anak, elemen induk memerlukan gaya berikut:

display: flex;
Salin selepas log masuk

Selain itu, anda harus menambah awalan penyemak imbas untuk memastikan keserasian merentas penyemak imbas.

Item penjajaran: regangan; harta juga penting. Walau bagaimanapun, memandangkan ia adalah nilai lalai untuk item jajar dalam kotak flex, anda tidak perlu menetapkannya secara eksplisit melainkan anda berhasrat untuk menggunakan nilai yang berbeza.

Sifat align-item Flexbox mempengaruhi elemen anak, bukan elemen yang digunakan untuknya. Untuk menentukan regangan bagi elemen kanak-kanak, anda boleh menggunakan sifat align-self.

Pertimbangkan contoh berikut:

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}
Salin selepas log masuk
<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>
Salin selepas log masuk

Dalam contoh ini, div anak lain wujud semata-mata untuk tujuan regangan ketinggian ibu bapa. Akibatnya, div kanak-kanak akan menduduki 100% ketinggian boleh laras ibu bapa.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Div Kanak-kanak Meregangkan Ketinggian Induknya dengan Ketinggian Tidak Diketahui?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan