Rumah >hujung hadapan web >tutorial css >Bolehkah Kita Mengira Lebar Port Pandangan Tanpa Bar Skrol dalam CSS?

Bolehkah Kita Mengira Lebar Port Pandangan Tanpa Bar Skrol dalam CSS?

Barbara Streisand
Barbara Streisandasal
2024-11-08 09:27:02904semak imbas

Can We Calculate Viewport Width Without Scrollbars in CSS?

Mengira Lebar Port Pandangan Tanpa Bar Tatal dalam CSS

Soalan: Bolehkah kita menentukan lebar port pandangan (vw) tidak termasuk bar tatal menggunakan semata-mata CSS?

Jawapan: Ya, adalah mungkin untuk mengira vw tanpa mengambil kira bar skrol menggunakan CSS. Satu kaedah menggunakan fungsi calc() untuk menolak lebar bar skrol daripada lebar port pandangan.

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

Dalam kod ini, 100vw mewakili lebar port pandangan penuh, dan 100% mewakili lebar port pandangan tanpa bar skrol. Istilah (100vw - 100%) berkesan mengira lebar bar skrol, yang kemudiannya ditolak daripada 100vw.

Nota Tambahan: Teknik ini juga boleh digunakan untuk mengira ketinggian segi empat sama yang menduduki separuh daripada lebar port pandangan, tidak termasuk 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 Bolehkah Kita Mengira Lebar Port Pandangan Tanpa Bar Skrol dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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