Bagaimanakah `ketinggian: 100%` HTML berfungsi dengan Nilai Peratusan dan Kesan DOCTYPE?

Harta Ketinggian HTML dan Nilai Peratusan

Dalam HTML, sifat ketinggian boleh ditetapkan kepada nilai peratusan untuk menentukan ketinggian unsur relatif kepada unsur induknya. Walau bagaimanapun, ini hanya berfungsi jika elemen induk mempunyai set ketinggian yang jelas. Secara lalai, unsur mempunyai ketinggian tersirat "auto", yang bermaksud ketinggiannya ditentukan secara automatik berdasarkan kandungannya.

Bahagian pertama soalan anda, tentang cara membuat div diisi halaman tanpa mengalih keluar DOCTYPE, boleh dijawab dengan mengubah suai CSS untuk memasukkan pengisytiharan ketinggian untuk "html" elemen:

html { ketinggian: 100%; }

Penyelesaian ini menghapuskan keperluan untuk mengalih keluar DOCTYPE, memastikan halaman dipaparkan dalam mod standard tanpa mengganggu fungsi ketinggian.

Mod Quirks lwn. Standard Mod

Bahagian kedua soalan anda, mengenai kesan mengalih keluar DOCTYPE, menyelidiki perbezaan antara mod kebiasaan dan mod standard.

Apabila DOCTYPE hadir, penyemak imbas memasuki mod standard, yang mematuhi piawaian web dengan ketat. Walau bagaimanapun, jika DOCTYPE ditinggalkan, penyemak imbas bertukar kepada mod quirks, yang cuba meniru gelagat penyemak imbas lama.

Dalam mod standard, peratusan untuk ketinggian sentiasa dikira berbanding ketinggian unsur induk mereka. Dalam contoh anda, memandangkan elemen badan tidak mempunyai ketinggian eksplisit (ia ditetapkan kepada "auto"), ketinggian div sebanyak 100% dikira secara berkesan sebagai "auto", menyebabkan tiada kandungan yang boleh dilihat.

Sebaliknya, mod quirks beroperasi dengan peraturan yang kurang boleh diramal. Dalam mod ini, ketinggian div dikira secara relatif kepada ketinggian viewport, membenarkan div mengisi keseluruhan halaman seperti yang dijangkakan.

Kesimpulan

Menetapkan nilai ketinggian 100% untuk div berfungsi seperti yang dimaksudkan dalam mod standard hanya apabila elemen induk mempunyai ketinggian eksplisit ditakrifkan. Dengan menetapkan ketinggian elemen html kepada 100%, anda boleh memastikan bahawa peratusan untuk ketinggian dalam halaman dikira dengan betul. Jika DOCTYPE dialih keluar, penyemak imbas bertukar kepada mod quirks, yang mengubah suai pengiraan peratusan dan membenarkan div mengisi halaman dengan ketinggian 100%, walaupun ketinggian induknya tidak dinyatakan secara eksplisit.

Atas ialah kandungan terperinci Bagaimanakah `ketinggian: 100%` HTML berfungsi dengan Nilai Peratusan dan Kesan DOCTYPE?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!