Bagaimana untuk Membuat Regangan Div CSS kepada 100% Ketinggian Halaman Tanpa JavaScript?

Cara Meregangkan Div CSS kepada 100% Ketinggian Halaman

Dalam dunia reka bentuk web, selalunya diingini untuk mempunyai elemen yang meregangkan ke ketinggian penuh halaman, termasuk kawasan tersembunyi yang boleh diakses melalui penatalan. Ini amat berguna untuk mencipta bar sisi, pengepala dan pengaki.

Untuk mencapai kesan ini tanpa menggunakan JavaScript, mari kita terokai penyelesaian CSS.

Penyelesaian CSS

Kunci untuk meregangkan div hingga 100% ketinggian halaman terletak pada pemahaman hubungan antara HTML dan elemen badan. Berikut ialah kodnya:

<code class="css">html {
    min-height: 100%; /* Ensure HTML is at least as tall as the viewport */
    position: relative; /* Make HTML box layout reference for divs */
}

body {
    height: 100%; /* Force BODY to match HTML height */
}

#my-div {
    position: absolute; /* Take div out of document flow */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden; /* Hide overflow for aesthetic purposes */
    z-index: -1; /* Remove this line for non-background uses */
}</code>

Penjelasan

• html: Kami menetapkan ketinggian minimum elemen HTML untuk memastikan ia berada di sekurang-kurangnya setinggi tempat pandang. Kedudukan: relatif; menjadikan kotak HTML sebagai rujukan untuk div.
• body: Kami memaksa elemen badan untuk sepadan dengan ketinggian elemen HTML. Ini memastikan keseluruhan halaman terbentang ke ketinggian penuh.
• #my-div: Menggunakan position: absolute;, kami mengalih keluar div daripada aliran dokumen dan meletakkannya sepenuhnya menggunakan atas, bawah , sifat kiri dan kanan. Limpahan: tersembunyi; menghalang limpahan daripada tertumpah keluar dari div.

Dengan mengikuti pendekatan ini, anda boleh membuat div CSS dengan mudah yang menjangkau ketinggian penuh halaman, memberikan anda lebih fleksibiliti dalam reka bentuk web anda.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Regangan Div CSS kepada 100% Ketinggian Halaman Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!