Mengapa Berbilang Bekas 100vw Menyebabkan Limpahan Mendatar?

Isu Limpahan Mendatar dengan Berbilang Bekas 100vw

Mempunyai berbilang bekas dengan lebar 100vw boleh menyebabkan limpahan mendatar, walaupun 100vw biasanya dianggap untuk mewakili lebar penuh viewport.

Satu sebab untuk isu ini ialah 100vw merujuk kepada keseluruhan lebar skrin yang boleh dilihat, termasuk lebar mana-mana bar alat penyemak imbas atau bar skrol. Apabila anda menambah bekas 100vw yang lain, jumlah lebar melebihi lebar skrin yang boleh dilihat, mengakibatkan limpahan mendatar.

Untuk menyelesaikan isu ini, anda boleh menambah kekangan lebar maksimum pada bekas. Ini memastikan bahawa ia tidak akan melebihi lebar port pandangan, walaupun terdapat berbilang bekas:

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

Dengan menambahkan peraturan lebar maksimum: 100%, anda mengehadkan lebar setiap bekas dengan berkesan kepada port pandangan yang tersedia lebar. Ini menghalang bekas daripada melimpah secara mendatar, sambil masih mengekalkan gelagat saiz semula dinamiknya berdasarkan lebar port pandangan.

Dengan menggunakan pembetulan ini, anda boleh menghalang limpahan mendatar apabila menggunakan berbilang bekas 100vw, memastikan reka letak yang konsisten dan responsif merentas saiz viewport yang berbeza.

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