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!

sumber：php.cn

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

• Bagaimanakah Saya Boleh Membuka dan Menutup Tab Pelayar Baharu dengan Cekap dengan Selenium dan Python?
  2024-12-12 19:45:12
• Adakah Saiz Penunjuk Sentiasa Padan dengan Jenis Data yang Ditunjuk?
  2024-12-12 19:44:10
• Mengapa Saya Mendapat Ralat 'SyntaxError: Tidak boleh menggunakan pernyataan import di luar modul' dalam Projek Node.js Saya?
  2024-12-12 19:43:08
• Bagaimana untuk Melarikan Petikan Tunggal dengan Benar dalam Rentetan MySQL?
  2024-12-12 19:42:14
• Bagaimana untuk Menyelesaikan Isu 'konflik App Engine dengan fail yang sama yang diimport daripada GOPATH'?
  2024-12-12 19:41:10
• Bagaimanakah Saya Boleh Mengakses Sifat Gaya CSS Pseudo-elemen dengan jQuery?
  2024-12-12 19:40:11
• Bagaimanakah Saya Boleh Mengalih Keluar Baris Pendua Merentasi Lajur Tertentu dalam Panda dengan Cekap?
  2024-12-12 19:39:16
• Bagaimanakah Saya Boleh Mencari Nilai Maksimum Harta Dengan Cekap Dalam Susunan Objek JavaScript?
  2024-12-12 19:38:11
• Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Apabila Menetapkan Imej Latar Belakang Boleh Skala dalam CSS?
  2024-12-12 19:37:11
• Bagaimanakah pengawal pengepala dilaksanakan dalam C dan apakah kod yang boleh muncul di antara mereka?
  2024-12-12 19:36:12

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

2165

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

2313

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

1950

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

1826

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

1879

Topik-topik yang berkaitan

Lagi>

• Bagaimana untuk menyelesaikan ralat pengecam mysql yang tidak sah
• Bagaimana untuk memadam halaman kosong dalam perkataan tanpa menjejaskan format lain
• penggunaan split js
• penggunaan fungsi stripslash
• Bagaimana untuk menyalin jadual Excel untuk menjadikannya saiz yang sama dengan yang asal
• Pengenalan kepada penggunaan vscode
• Linux menambah kaedah sumber kemas kini
• Penggunaan asas pernyataan sisipan