Wie kann ich mithilfe von CSS ein untergeordnetes DIV breiter als sein übergeordnetes DIV machen?

Erweitern der Breite eines untergeordneten DIV über die übergeordneten Grenzen hinaus mit CSS

Das Erweitern der Breite eines untergeordneten DIV über seinen übergeordneten Container hinaus ist mit CSS möglich. Dadurch kann sich das untergeordnete DIV über den gesamten Browser-Ansichtsbereich erstrecken.

Generische Lösung

Um dies zu erreichen, verwenden Sie die folgenden CSS-Eigenschaften für das untergeordnete Element:

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

• Breite: 100vw; Legt die Breite des untergeordneten Elements auf 100 % des Ansichtsfensters fest und erstreckt sich über das gesamte Browserfenster.
• Position: relativ; stellt sicher, dass die Positionierung des untergeordneten Elements relativ zu seinem übergeordneten Element ist, sodass Anpassungen möglich sind.
• left: calc(-50vw 50%); Versetzt den linken Rand des untergeordneten Elements um 50 % des Ansichtsfensters minus 50 % der Breite des übergeordneten Elements und richtet es an der linken Grenze des Browsers aus.

Beispiel

<div class="parent">
  <div class="child">Child</div>
</div>

.parent {
  width: 400px;
  margin: 0 auto;
  background-color: #ccc;
}

.child {
  height: 100px;
  border: 1px solid #000;
  background-color: #fff;
}

In diesem Beispiel werden ein 400 Pixel breites übergeordnetes DIV und ein untergeordnetes DIV erstellt, das das gesamte Ansichtsfenster erweitert Breite.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS ein untergeordnetes DIV breiter als sein übergeordnetes DIV machen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!