Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menetapkan Ketinggian Elemen kepada 100% Tolak Nilai Piksel Tetap Menggunakan CSS?

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

Linda Hamilton
Lepaskan: 2024-12-09 07:13:06
asal
707 orang telah melayarinya

How Can I Set an Element's Height to 100% Minus a Fixed Pixel Value Using CSS?

Menetapkan Lebar/Ketinggian sebagai Peratusan Tolak Piksel: Panduan Langkah demi Langkah

Dalam pembangunan web, mengekalkan konsistensi dan meminimumkan kekacauan kod adalah penting. Apabila mentakrifkan kelas CSS untuk komponen boleh guna semula, menyesuaikan ketinggian berdasarkan kandungan yang berbeza-beza boleh menjadi mencabar. Artikel ini menangani senario biasa di mana anda ingin menetapkan ketinggian senarai tidak tertib (ul) untuk menduduki ruang yang tinggal dalam div bekas selepas mengambil kira ketinggian pengepala tetap.

Untuk mencapai ini, CSS menawarkan fungsi calc(). Fungsi ini membolehkan anda melakukan pengiraan dalam penyata CSS anda. Dalam kes ini, anda boleh menggunakan sintaks berikut:

height: calc(100% - 18px);
Salin selepas log masuk

Ini menetapkan ketinggian ul kepada 100% daripada induknya, tolak 18px. 18px sepadan dengan ketinggian tetap div pengepala anda.

Perhatikan bahawa sesetengah penyemak imbas lama mungkin tidak menyokong fungsi calc(). Untuk memastikan keserasian merentas pelayar, pertimbangkan untuk melaksanakan versi fungsi khusus vendor juga:

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

Dengan memasukkan fungsi calc() dalam CSS anda, anda boleh menyeragamkan ketinggian ul anda dengan cekap berdasarkan kandungan dinamik tapak web anda. Teknik ini meningkatkan kedua-dua ketekalan dan fleksibiliti kod CSS anda.

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

sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan