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!

Artikel sebelumnya：Bagaimana Saya Boleh Menghalang Kata-kata Panjang daripada Memecahkan Reka Letak Div ​​Saya? Artikel seterusnya：Bagaimana Saya Boleh Menghalang Kata-kata Panjang daripada Memecahkan Div 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

• Final Fantasy 14: Panduan Bermain Machinist di PvP
  2025-02-23 14:02:13
• Magic: The Gathering - Mendicant Core, Panduan Panduan Panduan Panduan Panduan
  2025-02-23 12:03:17
• Saya menyesuaikan tetapan 7 ini selepas memasang Windows 11
  2025-02-23 11:42:13
• Cara membeli kad grafik yang digunakan tanpa mendapat scammed
  2025-02-23 11:27:09
• Cara mengekstrak imej dari video pada Windows 11
  2025-02-23 10:17:08
• BALATRO: Cara melengkapkan dek dicat di semua kepentingan
  2025-02-23 10:15:14
• Amazon menutup kedai dan iPhone baru: Roundup Mingguan
  2025-02-23 10:03:10
• Seperti Naga: Pirate Yakuza di Hawaii - Panduan Naga Kart
  2025-02-23 08:11:10
• Magic: The Gathering - Loot, Panduan Dek Komandan Pathfinder
  2025-02-23 08:09:10
• Hello Kitty Island Adventure: Semua lokasi dan penyelesaian bilik teka -teki Gunung Hothead
  2025-02-23 08:08:09

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

0

3

2814

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

0

11

2939

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

0

1

2457

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

daripada 2024-04-18 23:52:34

0

1

2380

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

2437

Topik-topik yang berkaitan

Lagi>

• Penyelesaian kepada masalah bahawa fail exe tidak boleh dibuka dalam sistem win10
• Bagaimana untuk mengintegrasikan idea dengan Tomcat
• js pembundaran
• Penyelesaian kepada aksara bercelaru semasa membuka excel
• Bagaimana untuk membeli, menjual dan berdagang Bitcoin
• Memori yang boleh bertukar maklumat secara terus dengan CPU ialah a
• Bagaimana untuk menetapkan pembalut baris automatik dalam perkataan
• Pengenalan kepada kekunci pintasan tangkapan skrin dalam win8