HTML & Tinggi Badan: 100% lwn. Ketinggian Min: 100% – Mana Yang Perlu Saya Gunakan?

Ketinggian lwn. Ketinggian Min untuk HTML dan Elemen Badan: Memahami Perbezaan

Dalam reka bentuk web, mencapai reka letak yang memenuhi tetingkap penyemak imbas boleh menjadi penting. Pembangun sering menetapkan ketinggian html dan elemen badan kepada 100%, menjangkakan ia akan dilanjutkan kepada saiz tetingkap penuh. Walau bagaimanapun, dalam senario tertentu, pendekatan ini gagal. Artikel ini bertujuan untuk menjelaskan isu ini dan memberikan penyelesaian yang disyorkan.

Mengapa Ketinggian: 100% atau Ketinggian Min: 100% Boleh Gagal

Menetapkan kedua-dua html dan badan kepada ketinggian: 100 % menghalang elemen badan daripada mengembang melepasi ketinggian viewport. Ini meninggalkan jurang yang ketara di bahagian bawah halaman, selalunya hasil yang tidak diingini.

Sebaliknya, ketinggian min: 100% pada kedua-dua elemen tidak berfungsi kerana ketinggian min dengan peratusan tidak digunakan kepada elemen badan melainkan html mempunyai ketinggian yang jelas ditakrifkan.

Penyelesaian Disyorkan: Ketinggian: 100% pada HTML, Ketinggian Min: 100% pada Badan

Untuk menangani batasan ini, adalah disyorkan untuk menetapkan html kepada ketinggian: 100% dan badan kepada ketinggian min: 100%. Ini membolehkan:

• html mengembangkan ke ketinggian port pandangan.
• badan untuk mengembangkan untuk menampung kandungan halaman, sambil mengekalkan ketinggian minimum 100%.

Imej Latar Belakang: Kes Khas

Apabila menggunakan imej latar belakang pada html dan badan yang mengisi tetingkap penyemak imbas, ketinggian: 100% mahupun ketinggian min: 100% tidak akan berfungsi dengan berkesan. Sebaliknya, adalah disyorkan untuk menggunakan pendekatan berikut:

html {
  height: 100%;
}

body {
  min-height: 100%;
}

Ini membolehkan imej latar belakang menutup keseluruhan tetingkap penyemak imbas tanpa sebarang jurang atau limpahan.

Atas ialah kandungan terperinci HTML & Tinggi Badan: 100% lwn. Ketinggian Min: 100% – Mana Yang Perlu Saya Gunakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!