Rumah > Artikel > hujung hadapan web > 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:30137semak imbas

How to Stretch a CSS Div to 100% Page Height Without JavaScript?

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!

JavaScript css html for while using Property this position overflow viewport

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

Artikel sebelumnya：Bagaimana untuk Menambah Sudut Bulat pada Baris Jadual dalam HTML?Artikel seterusnya：Bagaimana untuk Menambah Sudut Bulat pada Baris Jadual dalam HTML?

Artikel berkaitan

Lihat lagi