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

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

Persoalannya timbul: bolehkah CSS sahaja menentukan vw tidak termasuk bar skrol? Pertimbangkan skrin dengan lebar 1920px, di mana vw mengembalikan 1920px. Walau bagaimanapun, lebar badan sebenar adalah lebih kurang 1903px.

Untuk menangani percanggahan ini, gunakan fungsi CSS calc(). Dengan mengira 100vw tolak (100vw - 100%), nilai yang terhasil mewakili vw tidak termasuk lebar bar skrol.

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

Selain itu, teknik ini boleh digunakan pada pengiraan ketinggian. Sebagai contoh, untuk membuat segi empat sama yang menduduki 50% daripada lebar port pandangan tolak 50% daripada 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!