Rumah  >  Soal Jawab  >  teks badan

Petua Ketinggian Peratus HTML 5/CSS

<p>Saya cuba menetapkan <div> kepada ketinggian peratusan tertentu dalam CSS, tetapi saiznya masih sama dengan kandungan di dalamnya. Walau bagaimanapun, apabila saya mengalih keluar HTML 5 <!DOCTYTPE html>, ia berfungsi dengan baik dan <div> mengambil keseluruhan halaman seperti yang diharapkan. Saya mahu halaman itu lulus pengesahan, apakah yang perlu saya lakukan? </p> <p>Saya mempunyai CSS ini pada <div> dan IDnya ialah <kod>halaman</code>: </p> <pre class="brush:php;toolbar:false;">#page { padding: 10px; warna latar belakang: putih; ketinggian: 90% !penting; }</pre>
P粉135292805P粉135292805447 hari yang lalu598

membalas semua(2)saya akan balas

  • P粉759451255

    P粉7594512552023-08-21 18:49:34

    Anda juga perlu menetapkan ketinggian pada elemen <html><body> jika tidak, ia hanya cukup besar untuk memuatkan kandungan. Sebagai contoh :

    <!DOCTYPE html>
    <title>Example of 100% width and height</title>
    <style>
    html, body { height: 100%; margin: 0; }
    div { height: 100%; width: 100%; background: red; }
    </style>
    <div></div>

    balas
    0
  • P粉530519234

    P粉5305192342023-08-21 00:27:22

    Berapakah peratusan?

    Untuk menetapkan ketinggian peratusan, elemen induknya (*) mesti mempunyai ketinggian yang jelas. Ini agak jelas, jika anda membiarkan ketinggian sebagai auto, blok akan mengambil ketinggian kandungannya... Walau bagaimanapun, jika ketinggian kandungan itu sendiri dinyatakan sebagai peratusan unsur induk, anda berada dalam sedikit dilema. Penyemak imbas menyerah dan hanya menggunakan ketinggian kandungan.

    Oleh itu, elemen induk div mesti mempunyai atribut height yang jelas. Walaupun ketinggian boleh menjadi peratusan jika anda mahu, itu hanya membawa masalah ke peringkat seterusnya.

    Jika anda ingin menjadikan ketinggian div sebagai peratusan ketinggian viewport, setiap elemen nenek moyang div, termasuk <html><body>,都必须具有height: 100%, jadi terdapat rantaian peratusan ketinggian yang jelas kepada div.

    (*: Atau, jika div diletakkan, "blok yang mengandungi", unsur nenek moyang terdekat yang turut diletakkan.)

    Sebagai alternatif, semua penyemak imbas moden dan IE >= 9 menyokong unit CSS baharu berbanding ketinggian port pandangan (vh)和视口宽度(vw):

    div {
        height:100vh; 
    }

    Lihat maklumat lanjut di sini.

    balas
    0
  • Batalbalas