CSS: cómo desbordar de div al ancho completo de la pantalla

Tengo un DIV que contiene, que uso como parte de mi cuadrícula de respuesta. Se expande al ancho máximo que permití, que es 1280px, luego aparecen los márgenes para dispositivos grandes. Aquí está mi CSS + un poco de Less.

.container { margin-left:auto; margin-right:auto; max-width:1280px; padding:0 30px; width:100%; &:extend(.clearfix all); } 

Sin embargo, en algunas ocasiones me gustaría desbordar de lado: digamos que tengo una imagen de fondo o un color que debe ser de ancho completo. No soy bueno en CSS, pero ¿es posible lograr lo que quiero?

La solución más obvia es simplemente cerrar el contenedor … tener su div completo y luego abrir un nuevo contenedor. El título ‘contenedor’ es solo una clase … no es un requisito absoluto que contenga todo al mismo tiempo .

En esta instancia, aplica el color de fondo al div completo y no necesita aplicar un color al div interno restringido.

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } .container { max-width: 80%; border: 1px solid red; margin: 0 auto; } .fullwidth { background: orange; } header { height: 50px; background: #663399; } .mydiv { /* background: orange; */ min-height: 50px; } footer { height: 50px; background: #bada55; } 
 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.

Encontré este truco muy útil al usar vw en los margins ( Fuente )

Ejemplo:

 .inner-but-full { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } 

Demo:

 html,body { overflow-x: hidden; /* Prevent scrollbar */ } .inner-but-full { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); height: 50px; background: rgba(28, 144, 243, 0.5); } .container { width: 300px; height: 180px; margin-left: auto; margin-right: auto; background: rgba(0, 0, 0, 0.5); } 
 
   

yep

yep

yep