Wie kann ich Hintergründe in voller Breite erstellen und gleichzeitig einen responsiven Container beibehalten?

Überlaufende DIVs für Hintergründe in voller Breite

Im responsiven Design ist es oft wünschenswert, dass Elemente die gesamte Breite des Bildschirms einnehmen. Allerdings haben Container häufig vordefinierte maximale Breiten. Eine Lösung besteht darin, den Container in ein zusätzliches Div mit voller Breite einzuschließen, das über die Grenzen des Containers hinausgeht.

Beachten Sie das folgende CSS:

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 30px;
    width: 100%;
}

Dieser Container hat eine maximale Breite von 1280 Pixel und Ränder, die automatisch angepasst werden, um es auf dem Bildschirm zu zentrieren. Um einen Überlauf in voller Breite zu erreichen, erstellen Sie ein neues Div außerhalb des Containers ohne maximale Breite und wenden Sie dort die Hintergrundfarbe oder das Bild an:

.fullwidth {
    background: orange;
    padding-bottom: 100px;
}

Wickeln Sie den Container in dieses Div in voller Breite ein:

<div class="fullwidth">
    <div class="container">
        ...content...
    </div>
</div>

Dadurch kann jede Hintergrundfarbe oder jedes auf das Div mit voller Breite angewendete Bild die gesamte Breite des Bildschirms ausdehnen, während der Container innerhalb seiner vordefinierten Grenzen bleibt. Dieser Ansatz kann nützlich sein, um Banner oder andere Abschnitte in voller Breite zu erstellen und gleichzeitig ein reaktionsfähiges Rastersystem innerhalb des Containers aufrechtzuerhalten.

Das obige ist der detaillierte Inhalt vonWie kann ich Hintergründe in voller Breite erstellen und gleichzeitig einen responsiven Container beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!