Bagaimana untuk Meregangkan Div CSS kepada 100% Tinggi Halaman Tanpa JavaScript?-tutorial css-php.cn

Bagaimana untuk Meregangkan Div CSS kepada 100% Tinggi Halaman Tanpa JavaScript?

Linda Hamilton

Lepaskan： 2024-10-31 06:32:30

asal

221 orang telah melayarinya

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>

Salin selepas log masuk

<code class="html"><!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html></code>

Salin selepas log masuk

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!