Bagaimanakah Saya Boleh Menetapkan Ketinggian Bekas kepada Peratusan Tolak Nilai Piksel Tetap dalam CSS?-tutorial css-php.cn

Bagaimanakah Saya Boleh Menetapkan Ketinggian Bekas kepada Peratusan Tolak Nilai Piksel Tetap dalam CSS?

Susan Sarandon

Lepaskan： 2024-12-17 16:19:10

asal

973 orang telah melayarinya

How Can I Set a Container's Height to a Percentage Minus a Fixed Pixel Value in CSS?

Menetapkan Ketinggian Bekas sebagai Peratusan Tolak Nilai Tetap

Untuk mengekalkan konsistensi merentas tapak web anda dan mengurangkan penggayaan yang tidak perlu, kelas CSS boleh guna semula boleh memberi manfaat. Walau bagaimanapun, anda mungkin menghadapi cabaran apabila menyeragamkan elemen tertentu, seperti menetapkan ketinggian elemen bekas sebagai peratusan bekas induknya tolak nilai piksel tertentu.

Anda mempunyai bekas

dengan pengepala

dan senarai tidak tersusun (

Untuk mencapai ini, anda boleh menggunakan fungsi calc():

height: calc(100% - 18px);

Salin selepas log masuk

Fungsi ini membenarkan anda untuk melakukan pengiraan matematik dalam CSS. Dalam kes ini, ia menolak 18px daripada 100% untuk menentukan ketinggian senarai.

Perhatikan bahawa untuk penyemak imbas lama yang tidak menyokong fungsi CSS3 calc(), anda mungkin perlu melaksanakan versi khusus vendor sebagai baiklah:

/* 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 Ketinggian Bekas kepada Peratusan Tolak Nilai Piksel Tetap dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Mengapa Warna Latar Belakang Saya Tidak Bertukar pada Tuding? Artikel seterusnya：Bagaimanakah Saya Boleh Memusatkan Dua Elemen Secara Mendatar dan Menegak Di Dalam Div?

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

2240

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

2381

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

1990

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