Rumah >hujung hadapan web >tutorial css >Bagaimana Membuat Bekas `` Sentiasa Mengisi Keseluruhan Skrin?

Bagaimana Membuat Bekas `` Sentiasa Mengisi Keseluruhan Skrin?

Susan Sarandonasal: 2024-12-07 14:00:22918semak imbas

How to Make a `` Container Always Fill the Entire Screen?

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:

<head>
    <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>
</head>

<body>
    <div>

Pecahan CSS:

html, badan: Tetapkan ketinggian kepada 100% dan alih keluar sebarang jidar, memastikan bekas itu menduduki keseluruhan skrin.
#wrapper: Menetapkan ketinggian minimum kepada 100%, memastikan ia akan mengembang secara menegak untuk memuatkan skrin, walaupun kandungannya kecil.

Keserasian:

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:

<!--[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.

Atas ialah kandungan terperinci Bagaimana Membuat Bekas `` Sentiasa Mengisi Keseluruhan Skrin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html if for include this display margin

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Mengeluarkan Nilai Putaran daripada Transformasi CSS Elemen Menggunakan jQuery?Artikel seterusnya：Bagaimanakah Saya Boleh Mengeluarkan Nilai Putaran daripada Transformasi CSS Elemen Menggunakan jQuery?

Artikel berkaitan

Lihat lagi