Bagaimana Membuat Bekas `` Sentiasa Mengisi Keseluruhan Skrin?

Cara Memastikan Skrin Penuh

Bekas Tidak Kira Saiz Kandungan

Mencapai

bekas dengan saiz kandungan yang berbeza-beza boleh menjadi mencabar. Walau bagaimanapun, terdapat penyelesaian yang boleh dipercayai yang memberikan hasil yang diingini secara konsisten.

Penyelesaian:

Kod HTML dan CSS berikut memastikan skrin penuh

bekas:

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }
        
        #wrapper {
            min-height: 100%; 
        }
    </style>



    <div>
<p><strong>Pecahan CSS:</strong></p>
<ul>
<li>html, badan: Tetapkan ketinggian kepada 100% dan alih keluar sebarang jidar, memastikan bekas itu menduduki keseluruhan skrin.</li>
<li>#wrapper: Menetapkan ketinggian minimum kepada 100%, memastikan ia akan mengembang secara menegak untuk memuatkan skrin, walaupun kandungannya kecil.</li>
</ul>
<p><strong>Keserasian:</strong></p>
<p>Penyelesaian ini berfungsi dengan baik dalam semua penyemak imbas utama, termasuk IE. Untuk paparan optimum dalam IE 6 atau lebih awal, peraturan CSS tambahan disertakan:</p>
<pre class="brush:php;toolbar:false"><!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
<![endif]-->

Penggunaan:

Cuma sertakan kod HTML dan CSS dalam dokumen anda, dan mana-mana

elemen dengan ID "pembungkus" akan berkembang secara menegak untuk menduduki skrin penuh, tanpa mengira saiz kandungannya.