Bagaimanakah Saya Boleh Menetapkan Tinggi atau Lebar Elemen sebagai Peratusan Tolak Nilai Piksel Tetap dalam CSS?

Menetapkan Lebar/Ketinggian sebagai Peratusan Tolak Piksel

Satu cabaran biasa dalam CSS ialah menentukan ketinggian atau lebar elemen sebagai peratusan bekasnya tolak nilai tetap. Pertimbangkan senario berikut:

Anda mempunyai bekas

dengan ketinggian yang tidak diketahui dan pengepala

di dalamnya. Di bawah pengepala, anda mahu senarai tidak tersusun untuk mengambil ruang yang tinggal, dengan ketinggian pengepala yang diketahui sebanyak 18px. Bagaimanakah anda boleh menentukan ketinggian senarai secara dinamik sebagai "100% tolak 18px"?

Penyelesaian

Penyelesaian terletak pada penggunaan fungsi calc():

height: calc(100% - 18px);

Ini ungkapan mengira ketinggian dengan menolak nilai tetap yang diketahui (18px), membenarkan senarai berkembang untuk mengisi ruang yang tinggal dalam bekas.

Keserasian Penyemak Imbas

Walaupun calc() disokong secara meluas, sesetengah penyemak imbas lama memerlukan versi khusus vendor:

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

Untuk keserasian merentas penyemak imbas yang lengkap, pertimbangkan menggunakan semua versi bersama-sama dengan sintaks standard pada penghujung:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menetapkan Tinggi atau Lebar Elemen sebagai Peratusan Tolak Nilai Piksel Tetap dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!