Bagaimana untuk Menjadikan Kandungan Limpahan Lebar Bekas dalam CSS?

Kandungan Melimpah Melebihi Lebar Bekas dalam CSS

Dalam mereka bentuk reka letak responsif, adalah perkara biasa untuk menggunakan DIV bekas untuk menetapkan lebar maksimum dan digunakan margin untuk skrin yang lebih besar. Walau bagaimanapun, mungkin terdapat senario di mana anda perlu memanjangkan kandungan melebihi lebar yang ditetapkan bekas.

Cabaran:

Kod CSS yang disediakan mentakrifkan bekas dengan maksimum lebar 1280px, memastikan ia kekal berpusat dalam skrin yang lebih besar. Walau bagaimanapun, pengguna ingin mempunyai elemen tertentu, seperti imej latar belakang atau tindanan warna, memanjangkan lebar penuh skrin.

Penyelesaian:

Satu penyelesaian yang mudah adalah untuk mengelak daripada memasukkan kandungan yang melimpah di dalam bekas sama sekali. Sebaliknya, letakkan elemen lebar penuh di luar bekas dan gunakan penggayaan yang diperlukan untuk mencapai kesan yang diingini.

Pertimbangkan contoh berikut:

<div>
<pre class="brush:php;toolbar:false">.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  /* background: orange; */
  min-height: 50px;
}
footer {
  height: 50px;
  background: #bada55;
}

Dalam senario ini, div .fullwidth memanjangkan lebar penuh skrin manakala div .container dalam mengekalkan kedudukan tengah dan lebar terhad, walaupun walaupun ia bersarang dalam div lebar penuh. Warna latar belakang digunakan pada div .fullwidth, memastikan ia meliputi seluruh skrin tanpa mengira sempadan bekas.