Ini adalah kod lengkap:
<!DOCTYPE HTML>
<html>
<body style="height: 100%; padding: 0; margin: 0;">
<div style="background-color: green; height: 100%; width: 100%"></div>
</body>
</html>
Tiada apa-apa yang muncul. Walau bagaimanapun, jika saya mengalih keluar baris pertama (doctype), semua halaman bertukar hijau seperti yang dijangkakan.
Saya ada dua soalan:
div mengisi halaman tanpa mengalih keluar markup? doctype? 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Adakah anda maksudkan menegak? div ialah elemen peringkat blok, jadi secara lalai ia mengisi elemen induk secara mendatar.
Untuk memastikan ini berfungsi dengan betul, anda juga perlu menetapkan ketinggian tag HTML kepada 100%.
html, body { height:100%; }Lihat contoh kerja di sini:
http://jsfiddle.net/uhg0y9tm/1/
Seperti yang dikatakan oleh beberapa orang lain di sini, sebaik sahaja anda mengalih keluar baris pertama (jenis dokumen HTML5), penyemak imbas akan memaparkan halaman secara berbeza, dalam hal ini tidak perlu menentukan ketinggian eksplisit 100% untuk teg HTML.
CSS
heightHartanah, Nilai Peratusan dan DOCTYPEBahagian pertama soalan anda
anda, yang telah dijawab berkali-kali oleh orang lain. Pada asasnya, mengisytiharkan ketinggian unsur akar:divmenanyakan cara menggunakan ketinggian 100% padahtml { height: 100%; }Penjelasan penuh boleh didapati di sini:heightGunakan CSS sifat dan nilai peratusanBahagian kedua soalan anda kurang mendapat perhatian. Saya akan cuba menjawab soalan ini.
Apabila anda mengalih keluar DOCTYPE (Pengisytiharan Jenis Dokumen), penyemak imbas bertukar daripada Mod Standard kepada Mod Pelik.
Dalam Mod Pelik, juga dikenali sebagai Mod Keserasian, penyemak imbas meniru pelayar lama supaya ia boleh menghuraikan halaman web lama - halaman yang ditulis sebelum standard web wujud. Pelayar dalam mod pelik berpura-pura menjadi IE4, IE5 dan Navigator 4 supaya ia boleh memaparkan kod lama seperti yang dimaksudkan oleh pengarang.
Begini caranya Wikipedia mentakrifkan mod kebiasaan:
Berikut adalah pendapat MDN:
Sekarang, berikut ialah sebab khusus mengapa
height: 100%dalam kod anda berfungsi dalam mod pelik tetapi tidak dalam mod standard:Dalam mod standard, jika elemen induk mempunyai
高度: auto（没有定义高度），那么子元素的百分比高度也将被视为height: auto(mengikut spesifikasi).Sebab itu jawapan kepada soalan pertama anda ialah
html { height: 100%; }.Untuk
butiran lanjutheight: 100%在div中工作，您必须在父元素上设置heightberfungsi dalam anda mesti menetapkan pada elemen induk ().
diukur berbanding dengan port pandanganheight: autoWalau bagaimanapun, dalam mod pelik, jika elemen induk mempunyai , peratusan ketinggian elemen kanak-kanak akan.
🎜Berikut adalah tiga rujukan yang merangkumi tingkah laku ini: 🎜TL;DR
Ringkasnya, inilah perkara yang perlu diketahui oleh pembangun: