Bagaimanakah Saya Boleh Membuat Elemen Melimpah Dalam Bekasnya dalam CSS?

Limpahan Lebar Penuh dalam Bendung CSS

Dalam reka bentuk web, adalah perkara biasa untuk menggunakan sistem grid CSS dengan bekas untuk reka letak responsif. Walau bagaimanapun, senario tertentu memerlukan elemen untuk melangkaui lebar bekas. Soalan ini meneroka cara untuk mencapai gelagat "limpahan" ini.

Pernyataan Masalah

Seorang pembangun menghadapi isu di mana div kontena mengehadkan lebar kandungannya, menghalang latar belakang atau warna daripada memanjang ke skrin penuh. Mereka mencari panduan tentang cara untuk mengatasi had ini.

Penyelesaian

Penyelesaian paling mudah ialah keluar dari kurungan bekas. Ini boleh dilakukan dengan:

• Membuat div baharu di luar bekas sedia ada
• Menggunakan latar belakang atau warna elemen limpahan pada div baharu ini

Dalam dengan cara ini, elemen lebar penuh boleh melangkaui sempadan bekas, manakala kandungan terhad kekal dalam bekas.

Contoh

Pertimbangkan kod CSS dan HTML berikut:

* {
  box-sizing: border-box;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>

Dalam contoh ini, div lebar penuh tercetus daripada kurungan bekas dan memanjangkan latar belakang oren ke skrin penuh. Bekas dalam dan kandungannya kekal dalam lingkungan masing-masing.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Elemen Melimpah Dalam Bekasnya dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!