Bagaimana Membuat Bekas `` Sentiasa Mengisi Keseluruhan Skrin?-tutorial css-php.cn

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>

Salin selepas log masuk

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]-->

Salin selepas log masuk

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!

Artikel sebelumnya：Bagaimanakah Saya Boleh Mengeluarkan Nilai Putaran daripada Transformasi CSS Elemen Menggunakan jQuery? Artikel seterusnya：Mengapa `:first-child` Tidak Memilih H1 Saya?

Kenyataan Laman Web ini

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 terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2767

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2902

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

2425

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...