Mengapa Ketinggian Peratusan CSS Saya Tidak Berfungsi?

Peratusan Ketinggian CSS Tidak Berfungsi

Apabila cuba menentukan ketinggian elemen sebagai peratusan, ia mungkin gagal dipaparkan seperti yang diharapkan. Ini kerana peratusan ketinggian adalah relatif kepada elemen induknya. Oleh itu, adalah penting untuk menetapkan ketinggian semua elemen induk kepada 100%.

Dalam coretan kod yang disediakan:

<div>
<p>Isu timbul daripada ketiadaan pengisytiharan ketinggian untuk elemen induk iaitu elemen badan dan html. Tanpa pengisytiharan ini, peratusan ketinggian untuk div ditafsirkan secara relatif kepada ketinggian lalai induknya, yang biasanya tidak ditetapkan.</p>
<p>Untuk menyelesaikan isu ini, tetapkan ketinggian kedua-dua badan dan elemen html secara eksplisit kepada 100% , memastikan bahawa mereka menduduki keseluruhan viewport:</p>
<pre class="brush:php;toolbar:false">html, body { height: 100%; width: 100%; margin: 0; }

Dengan menetapkan html dan elemen badan kepada 100% ketinggian, elemen div kini boleh mengira ketinggiannya dengan betul berdasarkan ketinggian induknya, yang kini 100% daripada port pandangan. Akibatnya, div akan dipaparkan dengan betul dengan ketinggiannya menjangkau keseluruhan ketinggian tetingkap penyemak imbas.