Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menetapkan Tinggi atau Lebar Elemen sebagai Peratusan Tolak Nilai Piksel Tetap dalam CSS?

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

Linda Hamilton
Linda Hamiltonasal
2025-01-03 01:25:39879semak imbas

How Can I Set an Element's Height or Width as a Percentage Minus a Fixed Pixel Value in 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn