Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mengira Lebar Port Pandangan (vw) Tidak Termasuk Bar Skrol dalam CSS?

Bagaimana untuk Mengira Lebar Port Pandangan (vw) Tidak Termasuk Bar Skrol dalam CSS?

Linda Hamilton
Lepaskan: 2024-11-06 03:13:02
asal
366 orang telah melayarinya

How to Calculate Viewport Width (vw) Excluding the Scrollbar in CSS?

Mengira Lebar Port Pandangan (vw) Tidak Termasuk Bar Tatal dalam CSS

Seperti yang dinyatakan dalam soalan asal, mendapatkan lebar port pandangan (vw) tanpa perakaunan kerana bar skrol boleh menjadi satu cabaran menggunakan CSS sahaja. Walau bagaimanapun, terdapat penyelesaian yang melibatkan fungsi calc() yang boleh mencapainya.

Dalam calc(), 100% mewakili lebar port pandangan termasuk bar skrol. Dengan menolak perbezaan antara 100% dan 100vw, anda boleh mengabaikan lebar bar skrol dengan berkesan:

<code class="css">body {
  width: calc(100vw - (100vw - 100%));
}</code>
Salin selepas log masuk

Ungkapan ini memberikan elemen badan lebar sama dengan vw tolak lebar bar skrol.

Di samping itu, pendekatan ini boleh digunakan untuk mana-mana elemen, bukan hanya anak-anak langsung badan. Sebagai contoh, untuk membuat segi empat sama yang menduduki 50% daripada port pandangan sambil mengecualikan lebar bar skrol:

<code class="css">.box {
  width: calc(50vw - ((100vw - 100%) / 2));
  height: 0;
  padding-bottom: calc(50vw - ((100vw - 100%) / 2));
}</code>
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Mengira Lebar Port Pandangan (vw) Tidak Termasuk Bar Skrol dalam 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