CSS: impostare la larghezza a tutto di schermo degli elementi all'interno di elementi dimensionati

Con i CSS è possibile avere elementi a piena larghezza anche all'interno di elementi dimensionati.

La soluzione è la seguente:

html, body {
    overflow-x: hidden;
}

.element-full {
	position: relative; /* Impostare un colore di sfondo */
}

.element-full:after,
.element-full:before {
	/* Impostare lo stesso colore di sfondo del genitore */
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 9999px;
}

.element-full:after {
	left: 100%;
}

.element-full:before {
	right: 100%;
}