Mengapa 100vw Menyebabkan Limpahan Mendatar, dan Bagaimana Saya Boleh Membetulkannya?

Limpahan Mendatar dengan 100vw: Menyelidiki Sebab dan Penyelesaian

Penggunaan 100vw, yang bermaksud "100% daripada lebar port pandangan ," bertujuan untuk mengisi lebar skrin yang boleh dilihat. Walau bagaimanapun, apabila berbilang elemen dengan lebar ini digunakan secara menegak, fenomena aneh berlaku: bar skrol mendatar.

Punca Punca:

Kunci untuk memahami isu ini terletak dalam tingkah laku pelayar web dengan kandungan melimpah secara menegak. Apabila kandungan melebihi ketinggian port pandangan, bar skrol menegak ditambah. Walau bagaimanapun, dalam sesetengah penyemak imbas, bar skrol menegak ini juga boleh memperkenalkan bar skrol mendatar disebabkan pengiraan dalaman penyemak imbas.

Penyelesaian:

Untuk mengelakkan bar skrol mendatar yang tidak diingini ini, sifat CSS max-width: 100% boleh ditambah pada elemen dengan lebar 100vw. Peraturan tambahan ini memastikan bahawa lebar elemen tidak pernah melebihi 100% daripada lebar port pandangan, walaupun kandungan melimpah secara menegak.

Kod Disemak:

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

Oleh menggabungkan lebar maksimum: 100%, bar skrol mendatar hilang, membenarkan berbilang elemen dengan 100vw lebar untuk mengisi skrin tanpa sebarang kesan sampingan.

Oleh itu, limpahan mendatar dengan 100vw hanya berlaku apabila terdapat berbilang elemen dengan lebar ini disebabkan oleh kelakuan pelayar dengan kandungan yang melimpah. Dengan menambah lebar maksimum: 100%, isu ini boleh diselesaikan, memastikan elemen memenuhi skrin tanpa sebarang limpahan mendatar.

Atas ialah kandungan terperinci Mengapa 100vw Menyebabkan Limpahan Mendatar, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!