Comment étendre les éléments enveloppés à la largeur du navigateur complet à l'aide de CSS

Cet article discute de l'extension des éléments CSS au-delà d'une page centrée pour remplir la fenêtre du navigateur, un défi de mise en page commun. Le problème se pose lorsqu'un élément centré (par exemple, un article avec width: 70%; margin: 0 auto;) doit avoir un en-tête ou un pied de page pleine largeur.

Bien que l'utilisation d'un arrière-plan body pour les en-têtes est simple, les pieds de page posent un problème en raison de leur position dépendante du contenu dans le article centré. Une solution commune, bien que sémantiquement discutable, utilise des divs wrapper:

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

avec CSS:

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

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

Cela ajoute des divs inutiles. Une solution de croisement plus propre utilise un rembourrage et des marges négatives:

body {
    overflow-x: hidden;
}

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

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

Classes extendleft, extendright et extendfull Contrôlez l'extension. overflow-x: hidden empêche le défilement horizontal. Cela fonctionne à travers des navigateurs majeurs, mais IE6 et IE7 nécessitent un correctif:

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

Cela pourrait affecter les dispositions de navigateur modernes; Des ajustements peuvent être nécessaires.

Questions fréquemment posées (FAQ):

L'article fournit ensuite une section FAQ concernant les questions courantes sur la création de barres réactives, centrées et stylisées à l'aide de CSS, y compris:

• Réactivité: Utilisation vw Unités pour la largeur basée sur la fenêtre.
• Problèmes de pleine largeur: Adommagent les conflits de rembourrage / marge sur body ou html.
• Contenu centré: Utilisation de CSS Flexbox pour l'alignement du contenu.
• arrière-plans et bordures: ajoutant des couleurs d'arrière-plan, des bordures, des gradients, des ombres et un rembourrage.
• Barres collantes: Utilisation position: sticky; pour le positionnement fixe sur le défilement.
• Transitions: Appliquer des effets de transition pour les animations lisses.

L'article conclut en réitérant les solutions fournies et en mettant en évidence leurs avantages et leurs inconvénients potentiels.

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!