Bagaimana untuk Menjadikan Limpahan Kandungan sebagai Div Mengehadkan dalam CSS?

Kandungan Limpahan daripada Div Mengehadkan

Dalam CSS, elemen div biasanya bertindak sebagai bekas, mentakrifkan lebar dan margin tertentu. Walau bagaimanapun, terdapat keadaan di mana anda mungkin mahu membenarkan kandungan melimpah melebihi had div, memanjang ke lebar penuh skrin. Begini cara untuk mencapainya:

Pintas Bekas

Penyelesaian paling mudah ialah mengalih keluar sekatan bekas. Daripada menyimpan semua kandungan dalam div, buat div baharu untuk elemen lebar penuh. Ini membolehkan imej atau warna latar belakang melangkaui had bekas asal.

Dalam contoh berikut, kami mencipta div "lebar penuh" di luar "bekas":

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

HTML:

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">...</div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>

Dengan mengalih keluar bekas daripada div lebar penuh, kami membenarkan latar belakangnya meregang merentasi keseluruhan lebar skrin.

Melebihi Lebar Bekas

Pendekatan lain ialah menggunakan fungsi calc() untuk melaraskan lebar elemen secara dinamik. Ini boleh digunakan pada bekas induk atau elemen lebar penuh itu sendiri.

Sebagai contoh, kita boleh mengubah suai div "bekas" untuk mengembangkan melebihi lebar maksimumnya:

.container {
  width: calc(100% + 60px);
  max-width: 1280px;
}

Dalam kes ini, bekas itu kini akan mempunyai lebar yang melebihi lebar maksimumnya, membenarkan sebarang kandungan yang melimpah melepasi sempadan asal.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Limpahan Kandungan sebagai Div Mengehadkan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!