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
Lepaskan: 2024-11-08 09:27:02
asal
862 orang telah melayarinya

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

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