Bagaimanakah Saya Boleh Membuat Elemen Div Sentiasa Mengisi Keseluruhan Ketinggian Skrin?

Mengekalkan Skrin Penuh

Tanpa mengira Kandungan

Membuat

elemen yang menduduki keseluruhan ketinggian menegak skrin, tanpa mengira kandungannya, adalah cabaran pembangunan web yang biasa. Adakah ini boleh dilaksanakan?

Penyelesaian

Pendekatan CSS berikut secara konsisten mencapai kesan ini:

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

#wrapper {
  min-height: 100%;
}

Penyelesaian ini berfungsi dengan:

• Menetapkan atribut ketinggian dan margin kepada 0 untuk elemen html dan badan untuk menghapuskan penyemak imbas jidar.
• Menetapkan ketinggian min kepada 100% untuk elemen #pembungkus untuk memastikan ia menggunakan semua ruang menegak yang tersedia.

Nota Tambahan

• Untuk versi lama Internet Explorer (IE6 dan ke bawah), peraturan CSS tambahan diperlukan untuk memaksa #wrapper mengambil naikkan ketinggian skrin penuh.
• Menggunakan ketinggian min dan bukannya ketinggian membolehkan kandungan tambahan melebihi ketinggian skrin, jika perlu.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Elemen Div Sentiasa Mengisi Keseluruhan Ketinggian Skrin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!