简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Soal Jawab  >  teks badan

Mengapakah ketinggian 100% berfungsi tanpa pengisytiharan DOCTYPE?

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:

  1. Bagaimana untuk membuat div mengisi halaman tanpa mengalih keluar markup?
  2. Mengapa ia berfungsi seperti biasa jika saya memadamkan doctype?


P粉818561682P粉818561682380 hari yang lalu651

membalas semua(2)saya akan balas

  • P粉043432210

    P粉0434322102023-10-27 00:47:01

    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.

    balas
    0
  • P粉904405941

    P粉9044059412023-10-27 00:30:23

    CSS height Hartanah, Nilai Peratusan dan DOCTYPE

    Bahagian pertama soalan anda divmenanyakan cara menggunakan ketinggian 100% pada

    anda, yang telah dijawab berkali-kali oleh orang lain. Pada asasnya, mengisytiharkan ketinggian unsur akar: 

    html { height: 100%; }

    Penjelasan penuh boleh didapati di sini:

    Bahagian 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: < /p>

    Dalam mod standard, jika elemen induk mempunyai 高度: auto （没有定义高度），那么子元素的百分比高度也将被视为 height: auto (mengikut spesifikasi).

    Sebab itu jawapan kepada soalan pertama anda ialah html { height: 100%; }.

    Untuk height: 100% 在 div 中工作，您必须在父元素上设置 height berfungsi dalam anda mesti menetapkan pada elemen induk (

    butiran lanjut

    ). height: auto Walau bagaimanapun, dalam mod pelik, jika elemen induk mempunyai , peratusan ketinggian elemen kanak-kanak akan

    diukur berbanding dengan port pandangan

    .

    🎜Berikut adalah tiga rujukan yang merangkumi tingkah laku ini: 🎜

    TL;DR

    Ringkasnya, inilah perkara yang perlu diketahui oleh pembangun:

    balas
    1
  • Batalbalas