Mengapa Pelbagai Elemen Lebar 100vw Mencipta Bar Skrol Mendatar?

Misteri Limpahan Mendatar 100vw

Dalam bidang pembangunan web, unit 100vw biasanya digunakan untuk menetapkan lebar elemen untuk menduduki lebar viewport penuh. Walau bagaimanapun, isu pelik timbul apabila berbilang elemen dengan lebar 100vw diletakkan secara berturut-turut. Daripada mengisi skrin seperti yang dijangkakan, bar skrol menegak muncul bersama dengan skrol mendatar yang tidak dapat dijelaskan.

Untuk memahami fenomena ini, mari kita mendalami kod CSS:

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

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

Dengan satu elemen, div mengisi keseluruhan lebar skrin tanpa sebarang tatal. Walau bagaimanapun, penambahan div lain dengan kelas yang sama menghasilkan isu penatalan yang disebutkan di atas:

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

Penyebab di sebalik tingkah laku ini terletak pada sifat 100vw. Walaupun ia mewakili 100% lebar viewport, ia adalah unit bendalir yang turun naik dengan perubahan dalam saiz viewport. Contohnya, jika pengguna mengubah saiz tetingkap penyemak imbas dengan lebih sempit, div akan mengecut dengan sewajarnya, mengekalkan lebar 100vw mereka.

Dengan berbilang div menggunakan 100vw, apabila tetingkap cukup lebar, terdapat ruang yang cukup untuk mereka muat sisi -sebelah. Walau bagaimanapun, apabila tetingkap mengecut di bawah lebar tertentu, div tidak boleh mengecut lagi. Sebaliknya, ia mula bertindih, mewujudkan limpahan mendatar.

Bar skrol menegak muncul akibat daripada pertindihan itu. Penyemak imbas memperkenalkan bar skrol untuk membolehkan pengguna menatal secara mendatar dan mengakses kandungan yang tersembunyi di bawah div bertindih.

Untuk membetulkan isu ini, seseorang boleh menggunakan sifat lebar maksimum pada div, mengehadkan lebar maksimumnya kepada 100 %:

.box {
  max-width: 100%;
}

Dengan berbuat demikian, div masih akan menduduki lebar penuh viewport sebagai asalkan ada ruang yang mencukupi. Walau bagaimanapun, apabila tetingkap mengecil dan div tidak boleh muat bersebelahan, ia akan mengecut dan bertindan secara menegak, menghapuskan kedua-dua limpahan mendatar dan keperluan untuk menatal mendatar.

Atas ialah kandungan terperinci Mengapa Pelbagai Elemen Lebar 100vw Mencipta Bar Skrol Mendatar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!