Mengapa Elemen Label Saya Tidak Mengisi Keseluruhan Ketinggian Apabila Menetapkan `ketinggian: 100%;`?

Isu Ketinggian Label dengan Tetapan Peratusan

Walaupun menetapkan ketinggian kepada 100%, elemen label kekal tidak terjejas. Ini kerana ketinggian: 100%; bergantung pada titik rujukan, biasanya ketinggian elemen induk.

Dalam coretan kod yang disediakan, label medan .mempunyai ketinggian: 100%; harta, tetapi elemen induk, .field, tidak menyatakan nilai ketinggian. Akibatnya, penyemak imbas tidak mempunyai ketinggian yang ditentukan untuk mengira 100%.

Untuk menangani perkara ini, wujudkan nilai ketinggian untuk elemen induk .field. Sebagai contoh, anda boleh menetapkan ketinggian tetap menggunakan ketinggian: 200px; atau peratusan ketinggian berdasarkan unsur yang mengandungi menggunakan ketinggian: 50vh; (di mana vh mewakili ketinggian viewport).

Kod Diubah Suai:

<code class="css">.field {
    display: block;
    margin-bottom: 9px;
    background: none;
    border: none;
    height: 200px; /* Fixed height for reference */
}

.field label {
    color: #3E3E3E;
    font-weight: bold;
    width: 80px;
    display: block;
    float: left;
    margin-top: 5px;
    margin-left: 3px;
    height: 100%; /* Now it has a reference, 200px */
}</code>

Dengan menyediakan konteks ketinggian untuk elemen induk, tetapan ketinggian 100% label akan mengambil masa kesan, menghasilkan label yang dikembangkan sepenuhnya dalam bekas .field.

Atas ialah kandungan terperinci Mengapa Elemen Label Saya Tidak Mengisi Keseluruhan Ketinggian Apabila Menetapkan `ketinggian: 100%;`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!