Rumah >hujung hadapan web >tutorial css >Mengapa div ketinggian 100% hanya mengisi halaman apabila DOCTYPE dialih keluar?
Mengapa div ketinggian 100% hanya mengisi halaman apabila DOCTYPE dialih keluar?
- Mary-Kate Olsenasal
- 2024-12-27 13:37:11440semak imbas
Mengapa ketinggian 100% berfungsi apabila DOCTYPE dialih keluar?
Coretan kod ini cuba mengisi keseluruhan halaman dengan warna hijau div:
<!DOCTYPE HTML> <html> <body>
Walau bagaimanapun, ia tidak berfungsi seperti yang diharapkan. Div kekal tidak kelihatan. Jika kami mengalih keluar pengisytiharan DOCTYPE (), div tiba-tiba mengembang untuk memenuhi seluruh halaman. Ini menimbulkan dua soalan:
Bagaimana cara saya membuat div mengisi halaman tanpa mengalih keluar pengisytiharan DOCTYPE?
Untuk menjadikan div mengisi halaman tanpa mengalih keluar DOCTYPE, hanya tetapkan ketinggian elemen akar (html) kepada 100%:
html { height: 100%; }
Mengapakah mengalih keluar pengisytiharan DOCTYPE menjadikannya berfungsi?
Apabila DOCTYPE hadir, penyemak imbas memaparkan halaman dalam standard mod. Dalam mod standard, peratusan ketinggian unsur kanak-kanak dianggap sebagai ketinggian: auto jika unsur induk tidak mempunyai ketinggian yang jelas. Inilah sebabnya div tidak mengisi halaman dalam mod standard.
Walau bagaimanapun, apabila DOCTYPE tiada, penyemak imbas bertukar kepada mod quirks. Dalam mod kebiasaan, peratusan ketinggian unsur kanak-kanak diukur secara relatif kepada port pandangan. Ini bermakna div dalam contoh di atas akan mengisi keseluruhan halaman dalam mod quirks kerana ketinggiannya ditetapkan kepada 100% daripada ketinggian viewport.
Conclusion
Adalah penting untuk sentiasa memasukkan pengisytiharan DOCTYPE untuk memastikan halaman dipaparkan dalam mod standard. Mod Quirks tidak boleh dipercayai dan tidak dapat diramalkan, dan ia harus dielakkan pada semua kos. Pengisytiharan DOCTYPE yang diutamakan ialah:
<!DOCTYPE html>
Atas ialah kandungan terperinci Mengapa div ketinggian 100% hanya mengisi halaman apabila DOCTYPE dialih keluar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!