Mengapakah `100vw` Kadang-kadang Menyebabkan Limpahan Mendatar Tidak Dijangka?

100vw Menyebabkan Limpahan Mendatar Tidak Dijangka

Apabila memperuntukkan lebar 100vw kepada elemen, anda mungkin menjangkakan ia akan menduduki lebar ruang pandang penuh tanpa menyebabkan sebarang limpahan. Walau bagaimanapun, dalam keadaan tertentu, bar skrol mendatar boleh muncul walaupun menggunakan 100vw.

Pertimbangkan contoh berikut:

html, body {
  margin: 0;
  padding: 0;
}
.box {
  width: 100vw;
  height: 100vh;
}

<div class="box">Screen 1</div>

Dalam senario ini, elemen .box akan mengisi skrin tanpa sebarang bar skrol. Walau bagaimanapun, jika anda menambah elemen .box kedua di bawah yang pertama:

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

Anda akan melihat rupa bukan sahaja bar skrol menegak (dijangka) tetapi juga bar skrol mendatar sedikit.

Sebab untuk tingkah laku ini terletak pada cara 100vw ditafsirkan oleh pelayar. Walaupun ia bermaksud "100% daripada lebar port pandangan," ia mewakili bahagian paparan port pandangan yang kekal selepas mengambil kira sebarang ketebalan bar skrol. Dalam kes ini, kehadiran bar skrol menegak mengurangkan lebar port pandangan yang tersedia, yang boleh menyebabkan elemen .box kedua melimpah secara mendatar.

Untuk menyelesaikan isu ini, anda boleh menggunakan lebar maksimum: 100% pada .elemen kotak:

.box {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
}

Ini akan memastikan elemen itu tidak pernah melebihi lebar ruang pandang sebenar, dengan berkesan menghalang sebarang potensi mendatar melimpah.

Atas ialah kandungan terperinci Mengapakah `100vw` Kadang-kadang Menyebabkan Limpahan Mendatar Tidak Dijangka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!