Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Meregangkan Div CSS kepada 100% Tinggi Halaman Tanpa JavaScript?
Bagaimana untuk Meregangkan Div CSS kepada 100% Tinggi Halaman Tanpa JavaScript?
- Linda Hamiltonasal
- 2024-10-31 06:32:30218semak imbas
Meregangkan Div CSS kepada 100% Ketinggian Halaman Tanpa JavaScript
Meningkatkan pengalaman pengguna tapak web melibatkan memastikan elemen halaman berkelakuan seperti yang diharapkan . Satu keperluan biasa ialah mempunyai bar navigasi atau elemen lain yang meregang secara menegak untuk mengisi keseluruhan ketinggian halaman, tanpa mengira saiz port pandangan atau menatal. Walaupun JavaScript boleh mencapai ini, penyelesaian HTML/CSS semata-mata menawarkan kelebihan seperti fleksibiliti dan kemudahan pelaksanaan.
Penyelesaian:
Selepas mencuba pelbagai pendekatan, perkara berikut Struktur CSS dan HTML muncul sebagai penyelesaian optimum untuk meregangkan DIV kepada ketinggian halaman 100%:
<code class="css">/* Ensure the HTML element stretches to the full page height */
html {
min-height: 100%;
position: relative;
}
/* Force the body element to match the HTML element's height */
body {
height: 100%;
}
/* Position the DIV container absolutely and stretch it to all sides */
#cloud-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
z-index: -1; /* Only applies to background elements */
}</code>
<code class="html"><!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html></code>
Penjelasan:
Elemen html dibuat rujukan untuk pengukuran dan diletakkan secara relatif, yang menghalang elemen anak-anaknya daripada dialih keluar daripada susun aturnya. Ketinggian elemen badan ditetapkan kepada 100%, memastikan ia sepadan dengan ketinggian elemen html.
Kedudukan mutlak #cloud-container DIV, digabungkan dengan set atas/bawah/kiri/kanan kepada 0, memastikan ia menduduki keseluruhan ruang yang ada. Limpahan: sifat tersembunyi menghalang kandungan daripada melimpahi bekas.
Rasional:
Dengan meletakkan #cloud-container DIV sebagai anak kepada elemen html dan menggunakan kedudukan: sifat relatif pada elemen html, ia dijamin menempati ketinggian penuh halaman, walaupun kandungan lebih panjang daripada port pandang. Pendekatan ini teguh dan serasi secara meluas merentas penyemak imbas yang berbeza.
Atas ialah kandungan terperinci Bagaimana untuk Meregangkan Div CSS kepada 100% Tinggi Halaman Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!