Mengapa div ketinggian 100% hanya mengisi halaman apabila DOCTYPE dialih keluar?-tutorial css-php.cn

Mengapa div ketinggian 100% hanya mengisi halaman apabila DOCTYPE dialih keluar?

Mary-Kate Olsen

Lepaskan： 2024-12-27 13:37:11

asal

514 orang telah melayarinya

Why does a 100% height div only fill the page when the DOCTYPE is removed?

Mengapa ketinggian 100% berfungsi apabila DOCTYPE dialih keluar?

Coretan kod ini cuba mengisi keseluruhan halaman dengan warna hijau div:

<!DOCTYPE HTML>
<html>
<body>

Salin selepas log masuk

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%; }

Salin selepas log masuk

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>

Salin selepas log masuk

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!