Bagaimanakah Saya Boleh Mencipta Latar Belakang Lebar Penuh Semasa Mengekalkan Bekas Responsif?

DIV yang melimpah untuk Latar Belakang Lebar Penuh

Dalam reka bentuk responsif, selalunya wajar elemen untuk memenuhi lebar penuh skrin. Walau bagaimanapun, bekas selalunya mempunyai lebar maksimum yang dipratentukan. Satu penyelesaian ialah membungkus bekas dalam div lebar penuh tambahan yang melangkaui sempadan bekas.

Pertimbangkan CSS berikut:

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 30px;
    width: 100%;
}

Bekas ini mempunyai lebar maksimum 1280px dan margin yang melaraskan secara automatik untuk memusatkannya pada skrin. Untuk mencapai limpahan lebar penuh, buat div baharu di luar bekas tanpa lebar maksimum dan gunakan warna latar belakang atau imej di sana:

.fullwidth {
    background: orange;
    padding-bottom: 100px;
}

Balut bekas dalam div lebar penuh ini:

<div class="fullwidth">
    <div class="container">
        ...content...
    </div>
</div>

Ini akan membenarkan sebarang warna latar belakang atau imej yang digunakan pada div lebar penuh memanjangkan lebar penuh skrin, sementara bekas kekal dalam pratakrifnya sempadan. Pendekatan ini boleh berguna untuk membuat sepanduk atau bahagian lebar penuh lain sambil mengekalkan sistem grid responsif dalam bekas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Latar Belakang Lebar Penuh Semasa Mengekalkan Bekas Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!