如何在 CSS 中使內容溢出容器的寬度？

CSS 中超出容器寬度的內容溢出

在設計響應式佈局時，通常使用容器DIV 來建立最大寬度並應用大螢幕的邊距。但是，在某些情況下，您可能需要將內容擴展到超出容器的指定寬度。

挑戰：

提供的 CSS 程式碼定義了一個具有最大寬度的容器寬度為 1280 像素，確保其在較大螢幕中保持居中。但是，使用者希望某些元素（例如背景圖像或顏色疊加）能夠擴展螢幕的整個寬度。

解決方案：

一個簡單的解決方案是為了避免將溢出的內容物完全封閉在容器內。相反，請將全角元素放置在容器外部，並套用必要的樣式來實現所需的效果。

請考慮以下範例：

<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;
}

在這種情況下， .fullwidth div 擴充螢幕的整個寬度，而內部.container div 保持其居中位置和有限寬度，即使它嵌套在全角div 中也是如此。背景顏色應用於 .fullwidth div，確保它覆蓋整個螢幕，無論容器的邊界如何。