Comment puis-je créer des arrière-plans pleine largeur tout en conservant un conteneur réactif ?

DIV débordants pour les arrière-plans pleine largeur

Dans le design réactif, il est souvent souhaitable que les éléments occupent toute la largeur de l'écran. Cependant, les conteneurs ont souvent des largeurs maximales prédéfinies. Une solution consiste à envelopper le conteneur dans un div pleine largeur supplémentaire qui s'étend au-delà des limites du conteneur.

Considérez le CSS suivant :

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

Ce conteneur a une largeur maximale de 1 280 px et marges qui s’ajustent automatiquement pour le centrer sur l’écran. Pour obtenir un débordement sur toute la largeur, créez un nouveau div à l'extérieur du conteneur sans largeur maximale et appliquez-y la couleur ou l'image d'arrière-plan :

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

Enveloppez le conteneur dans ce div pleine largeur :

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

Cela permettra à toute couleur ou image d'arrière-plan appliquée au div pleine largeur de s'étendre sur toute la largeur de l'écran, tandis que le conteneur reste dans ses limites prédéfinies. Cette approche peut être utile pour créer des bannières ou d'autres sections pleine largeur tout en conservant un système de grille réactif au sein du conteneur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!