Bagaimanakah Saya Boleh Menetapkan Ketinggian Elemen kepada 100% Tolak Nilai Piksel Tetap Menggunakan CSS?

Menetapkan Lebar/Ketinggian sebagai Peratusan Tolak Piksel: Panduan Langkah demi Langkah

Dalam pembangunan web, mengekalkan konsistensi dan meminimumkan kekacauan kod adalah penting. Apabila mentakrifkan kelas CSS untuk komponen boleh guna semula, menyesuaikan ketinggian berdasarkan kandungan yang berbeza-beza boleh menjadi mencabar. Artikel ini menangani senario biasa di mana anda ingin menetapkan ketinggian senarai tidak tertib (ul) untuk menduduki ruang yang tinggal dalam div bekas selepas mengambil kira ketinggian pengepala tetap.

Untuk mencapai ini, CSS menawarkan fungsi calc(). Fungsi ini membolehkan anda melakukan pengiraan dalam penyata CSS anda. Dalam kes ini, anda boleh menggunakan sintaks berikut:

height: calc(100% - 18px);

Ini menetapkan ketinggian ul kepada 100% daripada induknya, tolak 18px. 18px sepadan dengan ketinggian tetap div pengepala anda.

Perhatikan bahawa sesetengah penyemak imbas lama mungkin tidak menyokong fungsi calc(). Untuk memastikan keserasian merentas pelayar, pertimbangkan untuk melaksanakan versi fungsi khusus vendor juga:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);

Dengan memasukkan fungsi calc() dalam CSS anda, anda boleh menyeragamkan ketinggian ul anda dengan cekap berdasarkan kandungan dinamik tapak web anda. Teknik ini meningkatkan kedua-dua ketekalan dan fleksibiliti kod CSS anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menetapkan Ketinggian Elemen kepada 100% Tolak Nilai Piksel Tetap Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!