Mengapa Div Dalaman Gagal Mencapai Ketinggian Penuh dalam IE Apabila Menggunakan Ketinggian 100% dalam Div Bekas?

Keanehan Ketinggian CSS dalam Kedudukan Div Merentasi Firefox dan IE

Dalam senario ini, tujuannya adalah untuk mencipta div kontena yang merangkumi dua dalaman divs, kedua-duanya merangkumi 100% lebar dan ketinggian di dalamnya. Walaupun ini berfungsi seperti yang dimaksudkan dalam Firefox, IE mempamerkan gelagat pelik di mana div dalaman gagal mencapai ketinggian penuh bekas, meninggalkannya pada ketinggian teks yang terkandung.

Percanggahan ini berpunca daripada konsep "blok yang mengandungi" dalam pengiraan CSS. Peratusan tidak dikira secara relatif kepada port pandangan tetapi lebih kepada ketinggian "blok yang mengandungi" - dalam kes ini, div #container.

Dalam CSS yang disediakan, #container tidak mempunyai spesifikasi ketinggian yang jelas, bergantung pada "auto" secara lalai. Ini bermakna ketinggiannya ditentukan berdasarkan kandungan di dalamnya. Selepas itu, sifat ketinggian 100% untuk div dalaman menjadi relatif kepada ketinggian auto ini, yang berbeza-beza berdasarkan kandungan teks.

Untuk membetulkan isu ini, pelarasan berikut diperlukan:

1. Isytiharkan nilai ketinggian yang jelas untuk #bekas untuk mewujudkan kandungan blok:

   <code class="css">#container {
     height: 100%;
   }</code>

   Salin selepas log masuk

2. Tetapkan ketinggian untuk kedua-dua html dan badan, kerana Blok Mengandungi awal bergantung kepada penyemak imbas:

   <code class="css">html, body {
     height: 100%;
   }</code>

   Salin selepas log masuk

Pengubahsuaian ini akan membolehkan div dalaman menjangkau ketinggian penuh #container dan 100% port pandangan, menyelesaikan isu ketinggian diperhatikan dalam IE.

Atas ialah kandungan terperinci Mengapa Div Dalaman Gagal Mencapai Ketinggian Penuh dalam IE Apabila Menggunakan Ketinggian 100% dalam Div Bekas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!