Rumah >hujung hadapan web >tutorial css >Bagaimana Membuat Elemen Div Sentiasa Menduduki Skrin Penuh?
Bagaimana Membuat Elemen Div Sentiasa Menduduki Skrin Penuh?
- Mary-Kate Olsenasal
- 2024-12-09 00:20:101036semak imbas
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:
<head>
<style>
html, body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%; /* This ensures the `#wrapper` is at least as tall as the viewport */
}
</style>
</head>
<body>
<div>Penyelesaian ini adalah mudah dan serasi merentas pelayar. Ia melibatkan penetapan empat atribut CSS:
- tinggi: 100% untuk
dan elemen memastikan ia memenuhi seluruh skrin secara menegak.
- margin: 0 untuk
dan elemen mengalih keluar sebarang jidar lalai atau padding yang boleh menjejaskan kesan skrin penuh.
- 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.
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!
Kenyataan：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.cnArtikel sebelumnya：Bagaimana untuk Menunjukkan Teks pada Hover Imej Menggunakan HTML dan CSS?Artikel seterusnya：Bagaimana untuk Menunjukkan Teks pada Hover Imej Menggunakan HTML dan CSS?
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:
<head>
<style>
html, body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%; /* This ensures the `#wrapper` is at least as tall as the viewport */
}
</style>
</head>
<body>
<div>Penyelesaian ini adalah mudah dan serasi merentas pelayar. Ia melibatkan penetapan empat atribut CSS:
- tinggi: 100% untuk
dan elemen memastikan ia memenuhi seluruh skrin secara menegak. - margin: 0 untuk
dan elemen mengalih keluar sebarang jidar lalai atau padding yang boleh menjejaskan kesan skrin penuh. - 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.
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!
- margin: 0 untuk
Kenyataan：
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