Mengapa Menggunakan 100vw Menyebabkan Limpahan Mendatar dengan Pelbagai Elemen?

Memahami Limpahan Mendatar Disebabkan oleh 100vw

Apabila menggunakan 100vw untuk mentakrifkan lebar elemen, pembangun mungkin menghadapi limpahan mendatar yang tidak dijangka apabila terdapat beberapa elemen sedemikian. Walaupun 100vw bertujuan untuk menandakan "100% daripada lebar port pandangan", senario tertentu boleh membawa kepada tingkah laku ini.

Pertimbangkan kod berikut:

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

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

Kod ini akan menghasilkan satu elemen yang memenuhi seluruh skrin tanpa sebarang bar skrol. Walau bagaimanapun, jika elemen kedua ditambah:

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

Hasilnya bukan sahaja bar skrol menegak (seperti yang dijangkakan) tetapi juga skrol mendatar sedikit. Mengapa ini berlaku?

Puncanya terletak pada kehadiran bar skrol menegak. Apabila kandungan elemen div melebihi ketinggiannya, bar skrol menegak muncul. Ini mengurangkan ruang mendatar yang tersedia untuk elemen, menyebabkan ia melimpah secara mendatar.

Untuk menyelesaikan isu ini, seseorang boleh menambah lebar maksimum: 100%; ke kelas kotak:

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

Dengan mengehadkan lebar maksimum elemen kepada 100%, limpahan mendatar dihalang walaupun apabila bar skrol menegak hadir.

Atas ialah kandungan terperinci Mengapa Menggunakan 100vw Menyebabkan Limpahan Mendatar dengan Pelbagai Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!