#Full-bleed layout with modern #CSS
Use modern CSS and a few lines of code to create a full-bleed layout.
Full-bleed? It’s when an element needs to bleed outside the main container and extend to the edge of the page.
html {
container-type: inline-size;
}
main {
--w: 600px; /* the max-width */
--m: 1em; /* margin on small screen */
margin-inline: max( var(--m),(100cqw - var(--w))/2);
}
.full-bleed {
margin-inline: min(-1*var(--m),(var(--w) - 100cqw)/2);
}
Gaffe : c’est avec des unités de container (92% d’adoption pour l’instant).
Est-ce que ça apporte quelque chose de plus que ce qu’on avait déjà avec :
.spip_documents.max {
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
}Sinon, sauf erreur, la division par deux suggère encore que c’est prévu pour fonctionner uniquement si la colonne de texte est elle-même centrée horizontalement dans l’écran (même marge à gauche et à droite), c’est généralement la limite de cette méthode (si la colonne de texte n’est pas au centre, on peut y arriver, mais faut faire des maths).