Bagaimana Membuat Elemen Div Sentiasa Menduduki Skrin Penuh?

Cara Mengekalkan

Skrin Penuh Tanpa mengira Saiz Kandungan

Masalah:

Adakah ia boleh dilakukan untuk membuat

elemen menduduki seluruh skrin tanpa mengira kandungan yang terkandung di dalamnya?

Penyelesaian:

Pendekatan CSS berikut secara konsisten mencapai kesan yang diingini:

  <style>
    html, body {
      height: 100%;
      margin: 0;
    }

    #wrapper {
      min-height: 100%; /* This ensures the `#wrapper` is at least as tall as the viewport */
    }
  </style>



  <div>
<p>Penyelesaian ini adalah mudah dan serasi merentas pelayar. Ia melibatkan penetapan empat atribut CSS:</p>
<ul>
<li>tinggi: 100% untuk <badan> dan  elemen memastikan ia memenuhi seluruh skrin secara menegak.</badan>
</li>
<li>margin: 0 untuk <badan> dan  elemen mengalih keluar sebarang jidar lalai atau padding yang boleh menjejaskan kesan skrin penuh.</badan>
</li>
<li>ketinggian min: 100% untuk elemen #wrapper memastikan ia sentiasa sekurang-kurangnya setinggi port pandangan, walaupun kandungannya adalah lebih pendek. Ini menghalang kandungan daripada dipangkas atau boleh ditatal.</li>
</ul>
</div>

Atas ialah kandungan terperinci Bagaimana Membuat Elemen Div Sentiasa Menduduki Skrin Penuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!