Volle Browserbreite Balken

Je länger die Zeilenlänge von Textinhalten wird, desto schwerer ist er zu lesen. Daher ist es üblich, die Breite des Inhalts zu begrenzen, wenn sich die Ansichtsfensterbreite erhöht. Oft wird dies erreicht, indem dem Inhalt eine max-width gegeben und er zentriert wird, entweder innerhalb eines umgebenden Elements oder Abschnitt für Abschnitt.

Aber was ist, wenn wir möchten, dass ein Element visuell die volle Breite des Ansichtsfensters einnimmt, zum Beispiel eine Hintergrundfarbe für eine Kopfzeile oder einzelne Überschriften?

Ein Ansatz ist die Verwendung eines inneren Wrappers für den Inhalt, dessen Breite begrenzt werden soll, während das äußere Element bei 100% Breite belassen wird. Dies fügt jedoch zusätzlichen Markup hinzu und ist (wohl, GASP) nicht-semantisch!

<header>
  <div class="wrap">
    <h2>Header</h2>
  </div>
</header>

<h3 class="full-width">
  <div class="wrap">Heading</div>
</h3>
<div class="wrap">
  <p>... text ... </p>
</div>

header, .full-width {
  width: 100%;
  background: #ccc;
}
.wrap {
  width: 80%;
  max-width: 24em;
  margin: 0 auto;
  padding: 0.25em 0.625em;
}

Es wäre besser, den Inhalt semantisch (z. B. main oder section) zu umschließen und die Überschriften nach Bedarf visuell hervorzuheben. Hier sind einige Möglichkeiten, wie wir das tun können

Verwendung von negativen Abständen

Ein einfacher Ansatz (von Timothy Mackey) verwendet negative Abstände und Polsterung, um den Hintergrund in beide Richtungen zu erweitern. Um horizontalen Scrollen zu vermeiden, müssen wir overflow-x:hidden sowohl für die html- als auch für die body-Elemente festlegen.

html, body {
  overflow-x: hidden;
}
.full-width-bar {
  margin: 0 -9999rem;
  /* add back negative margin value */
  padding: 0.25rem 9999rem;
  background: rgba(0, 0, 0, 0.5);
}

Siehe den Pen Full Width Bars Using Negative Margins von Chris Coyier (@chriscoyier) auf CodePen.

Möchten Sie, dass der Balken voller Breite eine andere Farbe hat als der Hintergrund der Überschrift? Eine Möglichkeit besteht darin, linke und rechte Ränder zu verwenden. Aber superbreite Ränder haben einige Probleme. Bei Rändern über 960px müssen Sie sie genau 9600px oder 10240px (oder gleichwertige ems) machen, um einen Fehler in Chrome zu vermeiden. Außerdem müssen Sie durchgehende Farben verwenden, da RGBa-Werte in Safari eine winzige Lücke aufweisen. Dies liegt an Rundungsfehlern, wenn das enthaltende Element zentriert ist.

html, body {
  overflow-x: hidden;
}

.full-width-borders {
  /* also subtract section padding (1.5rem) */
  margin: 0 -601.5rem;
  /* add back section padding (1.5rem) */
  padding: 0.25rem 1.5rem;
  background: red;
  /* border has to be solid, not RGBa */
  /* 9600px or equiv (600rem = 9600/16) */
  border-left: 600rem solid maroon;
  border-right: 600rem solid maroon;
}

Siehe den Pen Full Width Bars Using Borders von Parker Bennett (@parkerbennett) auf CodePen.

Angesichts der Mühsal bei der Verwendung von Rändern schauen wir uns eine Alternative an

Verwendung von Pseudo-Elementen

Durch Hinzufügen eines :before Pseudo-Elements zur Überschrift können Sie den Hintergrund dahinter vom Balken voller Breite abheben, indem Sie absolute Positionierung und einen negativen z-index verwenden. Dies ermöglicht es uns auch, RGBa für den Balken voller Breite zu verwenden.

.full-width-tinted {
  position: relative; /* for child pseudo-element */
  z-index: 0;
  margin: 0 -600rem;
  /* add back negative margin value */
  padding: 0.25rem 600rem;
  background: #666;
  background: rgba(0, 0, 0, 0.25);
}

.full-width-tinted:before {
  content: "";
  position: absolute;
  z-index: -1; /* behind parent */
  top: 0;
  bottom: 0;
  /* subtract h2 padding (1.5rem) */
  left: 598.5rem;
  right: 598.5rem;
  background: green;
}

Siehe den Pen Full Width Bars Using Negative Margins von Chris Coyier (@chriscoyier) auf CodePen.

Sie müssen bei einem negativen z-index etwas vorsichtig sein, da er nur in relativ einfachen Situationen ohne viele verschachtelte Elemente mit eigenen Hintergründen funktioniert.

Wenn Sie noch mehr Flexibilität wünschen, können Sie zwei Pseudo-Elemente, :before und :after, verwenden, um den Hintergrund der Kopfzeile nach links und rechts zu erweitern. So könnte der Hintergrund verschiedene Farben, Breiten oder Höhen enthalten, nur in eine Richtung reichen, mit einem Farbverlauf ausblenden usw.

.full-width {
  position: relative; /* for the child pseudo-elements */
  /* negative offset = section padding */
  margin: 0 -30px;
  /* add back section padding value */
  padding: 0.25rem 30px;
  background: #333;
}
.full-width:before, .full-width:after {
  content: "";
  position: absolute;
  /* fill vertically */
  top: 0;
  bottom: 0;
  width: 9600px;
  right: 100%;
  background: green;
}
.full-width:after { 
  width: 320px;
  left: 100%;
  /* you're free to do something totally different here */
  background: green;
}

Siehe den Pen Full Width Bars Using Pseudo-Elements von Chris Coyier (@chriscoyier) auf CodePen.

Verwendung von box-shadow

Eine clevere Methode, um kein horizontales Scrollen auszulösen, ist die Verwendung von box-shadow, um die Hintergrunderweiterungen zu generieren (zumindest nach rechts). Andreas hat eine Demo davon erstellt

Siehe den Pen Full Width Browser Bars with box-shadow von Andreas (@receter) auf CodePen.

Leider gibt es damit Probleme. Charles Stuart wies auf einen Bug in Internet Explorer 11 (v11.0.9600.17501) hin, der die Verwendung von box-shadow unzuverlässig macht. Es scheint, dass IE eine Subpixel-Kantenglättung auf den box-shadow anwendet, auch wenn die Unschärfe auf 0 gesetzt ist.

Verwendung von Viewport-Einheiten

Lisa schlug eine Methode vor, um horizontales Scrollen zu vermeiden, indem eine Kombination aus vw und calc() verwendet wird, die jetzt ziemlich solide Browserunterstützung hat. Sie könnte unter den richtigen Umständen nützlich sein (aber berücksichtigt noch keine Dinge wie padding oder min-width).

Siehe den Pen Full width bars von Chris Coyier (@chriscoyier) auf CodePen.