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

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>

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!