Ketinggian atau Min-Ketinggian: Mana yang Terbaik untuk HTML dan Reka Letak Elemen Badan?

Ketinggian lwn. Min-Ketinggian untuk HTML dan Elemen Badan dalam Reka Letak

Apabila menetapkan reka letak, pembangun biasanya menggunakan mana-mana ketinggian: 100% atau ketinggian min: 100% untuk html dan elemen badan. Walau bagaimanapun, kaedah ini sering gagal dalam senario tertentu, menyebabkan pereka tertanya-tanya pendekatan mana yang lebih baik.

Ketinggian: 100%

Menggunakan ketinggian: 100% pada kedua-dua html dan badan elemen membetulkannya kepada ketinggian viewport. Kaedah ini berkesan menggunakan imej latar belakang yang memenuhi keseluruhan tetingkap penyemak imbas. Walau bagaimanapun, ia menghalang badan daripada mengembang dengan kandungannya yang semakin meningkat, mengakibatkan jurang yang tidak diingini di bawah lipatan port pandangan.

Ketinggian Min: 100%

Menentukan ketinggian min: 100% pada kedua-dua html dan elemen badan memastikan bahawa badan boleh berkembang ke ketinggian port pandangan, membolehkan untuk menatal kandungan. Walau bagaimanapun, kaedah ini hanya berfungsi jika html mempunyai ketinggian yang jelas.

Pendekatan Disyorkan

Untuk imej latar belakang yang mengisi tetingkap penyemak imbas, penyelesaian yang disyorkan ialah:

html {
  height: 100%;
}

body {
  min-height: 100%;
}

Pendekatan ini membolehkan html menentukan ketinggian dan kandungan port pandangan untuk berkembang mengikut keperluan, mengelakkan kedua-dua jurang dan kandungan limpahan.

Pertimbangan Tambahan

Html dan badan kekurangan ketinggian yang wujud, jadi ketinggian yang jelas: auto ditetapkan secara lalai. Imej latar belakang yang digunakan pada elemen ini mesti dinyatakan secara eksplisit dalam html kerana html memperoleh ketinggiannya daripada viewport.

Manakala ketinggian min: 100% tanpa ketinggian html yang jelas boleh membawa kepada tingkah laku yang tidak dijangka, memahami spesifikasi CSS ( seksyen 10 CSS2.1) memberikan penjelasan menyeluruh tentang teknikal ini.

Atas ialah kandungan terperinci Ketinggian atau Min-Ketinggian: Mana yang Terbaik untuk HTML dan Reka Letak Elemen Badan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!