Bagaimanakah Saya Boleh Menentukan Lebar Viewport (vw) Tidak Termasuk Bar Skrol dalam CSS?

Menentukan Lebar Port Pandangan (vw) Tidak Termasuk Bar Tatal menggunakan CSS

Seperti yang dinyatakan dalam pertanyaan, mengira lebar port pandangan (vw) tanpa bar tatal semata-mata melalui CSS boleh mencabar. Pengukuran vw konvensional termasuk ruang yang diduduki oleh bar skrol.

Penyelesaian CSS tanpa JavaScript

Walau bagaimanapun, penyelesaian wujud menggunakan fungsi calc dalam CSS. Dengan menolak perbezaan antara 100% (lebar port pandangan dengan bar skrol) dan 100vw (lebar port pandangan tidak termasuk bar skrol) daripada 100vw, kami menghapuskan lebar bar skrol dengan berkesan:

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

Contoh

Sebagai contoh, jika lebar port pandangan ialah 1920px dan bar skrol menduduki 17px, hasilnya:

100vw - (100vw - 100%) = 1920px - (1920px - 1903px)

100vw - (100vw - 100%) = 1920px - (1920px - 1903px)

Kesimpulan

Dengan menggunakan ungkapan calc ini, adalah mungkin untuk mengira lebar viewport tanpa bar skrol, memberikan gambaran yang lebih tepat bagi kawasan yang kelihatan sebenar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menentukan Lebar Viewport (vw) Tidak Termasuk Bar Skrol dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!