Mengapa Div Tidak Menjangkau Ketinggian Bekas dalam IE?

Pengiraan Ketinggian dalam Div: Firefox lwn. Keserasian IE

Dalam halaman web dengan dua div bersarang dalam bekas, jangkaan adalah untuk kedua-dua div dalam untuk menduduki sepenuhnya lebar dan ketinggian bekas. Walau bagaimanapun, telah diperhatikan bahawa dalam Internet Explorer (IE), div dalam hanya berkembang ke ketinggian teks yang terkandung di dalamnya, tidak seperti dalam Firefox di mana ia meregangkan ke ketinggian kontena penuh.

Set helaian gaya yang disediakan kedua-dua div dalaman, #mainContentsWrapper dan #sidebarWrapper, hingga ketinggian 100%. Ini berfungsi seperti yang dimaksudkan dalam Firefox, tetapi bukan IE. Sebab percanggahan ini terletak pada takrifan ketinggian peratusan Spesifikasi CSS.

Peratusan dalam pengukuran ketinggian bergantung pada ketinggian "blok yang mengandungi", bukan port pandangan. Dalam senario yang diberikan, #container berfungsi sebagai blok yang mengandungi untuk div dalam. Memandangkan ketinggian #container ditetapkan kepada "auto", ia bergantung pada ketinggian kandungan. Akibatnya, peratusan ketinggian div dalam dikira secara berkesan sebagai "auto", yang mengakibatkan tingkah laku yang tidak dijangka dalam IE.

Untuk menangani isu ini, ketinggian #bekas mesti ditakrifkan dengan jelas. Selain itu, untuk memastikan div meregang ke ketinggian penuh port pandangan, ketinggian dan elemen juga perlu dinyatakan.

Dengan membuat pelarasan ini, kod harus berkelakuan seperti yang diharapkan dalam kedua-dua Firefox dan IE:

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

Atas ialah kandungan terperinci Mengapa Div Tidak Menjangkau Ketinggian Bekas dalam IE?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!