So erweitern Sie verpackte Elemente mit CSS auf die volle Browserbreite

In diesem Artikel wird die Erweiterung von CSS -Elementen über eine zentrierte Seite über das Browserfenster hinaus ausgedehnt, eine gemeinsame Layout -Herausforderung. Das Problem tritt auf, wenn ein zentriertes Element (z. B. ein article mit width: 70%; margin: 0 auto;) einen Kopfball oder Fußzeile in voller Breite haben muss.

Während der Verwendung eines body -Gerhebers für Header ist einfach, dass Fußzeilen aufgrund ihrer inhaltsabhängigen Position innerhalb des zentrierten article ein Problem darstellen. Eine häufige, wenn auch semantisch fragwürdige Lösung ist die Verwendung von Wrapper Divs:

<article>
    …content…
    <div class="content">
        <p>Footer content.</p>
    </div>
</article>

mit CSS:

footer {
    width: 100%;
    background: url(footer.png) 0 0 repeat-x;
}

.content {
    width: 70%;
    margin: 0 auto;
}

Dies fügt unnötige Divs hinzu. Eine sauberere Cross-Browser-Lösung verwendet Polsterung und negative Ränder:

body {
    overflow-x: hidden;
}

.extendfull, .extendleft {
    padding-left: 3000px;
    margin-left: -3000px;
}

.extendfull, .extendright {
    padding-right: 3000px;
    margin-right: -3000px;
}

Klassen extendleft, extendright und extendfull steuern die Erweiterung. overflow-x: hidden verhindert horizontales Scrollen. Dies funktioniert in wichtigen Browsern, aber IE6 und IE7 erfordern eine Lösung:

/* IE6/7 fix */
.extendfull, .extendleft, .extendright {
    position: relative;
    display: inline;
    float: left;
    width: 100%;
}

Dies kann sich auf moderne Browser -Layouts auswirken. Anpassungen können erforderlich sein.

häufig gestellte Fragen (FAQs):

Der Artikel enthält dann einen FAQ

• Reaktionsfähigkeit: Verwenden von Einheiten für die basierte Breite von Ansichtsfenster. vw
• Probleme mit der vollständigen Breite: Konflikte zwischen Polsterung/Margin zu oder body. html
• Inhalt des Zentrierens: Verwenden von CSS Flexbox für die Ausrichtung des Inhalts.
• Hintergründe und Grenzen: Hintergrundfarben, Grenzen, Gradienten, Schatten und Polsterung hinzufügen.
• Sticky Balken: Verwenden Sie für die feste Positionierung bei Scroll. position: sticky;
• Übergänge: Übergangseffekte für glatte Animationen anwenden.

Das obige ist der detaillierte Inhalt vonSo erweitern Sie verpackte Elemente mit CSS auf die volle Browserbreite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!