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

Piksel Tolak Ketinggian Berasaskan Peratusan untuk Saiz Elemen Optimum

Meningkatkan konsistensi tapak web dan mengurangkan kekacauan kod melalui kelas CSS boleh guna semula merupakan usaha yang patut dipuji. Apabila berurusan dengan bekas dengan kandungan bendalir, ia menjadi perlu untuk menentukan cara menetapkan ketinggian elemen tertentu. Artikel ini menangani senario biasa.

Pertimbangkan div bekas dengan div pengepala dan senarai tidak tertib. Matlamatnya adalah untuk memperuntukkan baki ketinggian dalam bekas kepada senarai, tidak termasuk ketinggian tetap pengepala 18px.

Untuk mencapai ini, CSS menawarkan fungsi calc(), yang membenarkan pengiraan dinamik dalam peraturan gaya:

height: calc(100% - 18px);

Ungkapan ini memberikan senarai ketinggian yang sama dengan 100% bekas, tidak termasuk pengepala 18px ketinggian.

Walau bagaimanapun, sesetengah penyemak imbas lama mungkin tidak menyokong fungsi calc(). Dalam kes sedemikian, pertimbangkan untuk menggunakan pelaksanaan khusus vendor:

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

Dengan menggabungkan peratusan dan nilai tetap dengan berkesan menggunakan fungsi calc(), anda boleh memperhalusi saiz elemen, memastikan konsistensi dan meningkatkan keseluruhan pengguna pengalaman di tapak web anda.

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