Bagaimanakah Saya Boleh Menetapkan Tinggi atau Lebar Elemen sebagai Peratusan Tolak Nilai Piksel Tetap dalam CSS?-tutorial css-php.cn

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

Linda Hamilton

Lepaskan： 2025-01-03 01:25:39

asal

902 orang telah melayarinya

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);

Salin selepas log masuk

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);

Salin selepas log masuk

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);

Salin selepas log masuk

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!

Artikel sebelumnya：Mengapa Imej Latar Belakang Saya Tidak Dipaparkan dengan Betul dalam Safari? Artikel seterusnya：Bolehkah CSS Mengubah Atribut Sumber Imej Secara Terus?

Kenyataan Laman Web ini

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

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2681

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2817

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

2378

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...