Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencapai 100% Ketinggian Elemen Kanak-Kanak Dalam Induk Ketinggian Boleh Ubah?

Bagaimanakah Saya Boleh Mencapai 100% Ketinggian Elemen Kanak-Kanak Dalam Induk Ketinggian Boleh Ubah?

DDD
DDDasal
2024-12-22 11:42:15494semak imbas

How Can I Achieve 100% Child Element Height Within a Variable-Height Parent?

Mencapai 100% Ketinggian Kanak-kanak dalam Ibu Bapa yang Berbeza-beza

Dalam susun atur berbilang lajur, memastikan lajur navigasi sejajar secara menegak dengan kandungan utama adalah penting. Walau bagaimanapun, tanpa menyatakan ketinggian ibu bapa, ini boleh terbukti mencabar.

Penyelesaian:

Gunakan sifat paparan flex pada elemen induk. Ini membolehkan kanak-kanak melentur dan mengembang secara menegak, menduduki ketinggian ibu bapa.

.parent {
  display: flex;
}

Sifat Tambahan:

  • item sejajar: regangan; menetapkan elemen kanak-kanak untuk meregang secara menegak dalam induk.
  • arah lentur: lajur; menjajarkan elemen anak secara menegak (nilai lalai).

Contoh:

.parent {
  display: flex;
  align-items: stretch;
}

.child {
  height: 100%;
  width: 50%;
}

Nota:

  • Awalan untuk keserasian merentas pelayar disyorkan.
  • Memastikan bahawa elemen induk mempunyai beberapa ketinggian adalah penting untuk penjajaran menegak yang betul.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai 100% Ketinggian Elemen Kanak-Kanak Dalam Induk Ketinggian Boleh Ubah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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