CSS: cómo desbordar desde div hasta el ancho completo de la pantalla

Tengo un DIV que contiene, que uso como parte de mi cuadrícula receptiva. Se expande hasta el ancho máximo que permito, que es 1280 px, luego aparecen márgenes para dispositivos grandes. Aquí está mi CSS + un poco menos.

.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 desbordarme hacia los lados; digamos que tengo una imagen de fondo o un color que debe tener todo el ancho. No soy bueno en CSS, pero ¿es posible lograr lo que quiero?

Feb 17 '15 23:02 dotnetnoob

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

En este caso, aplica el color de fondo al div de ancho 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;
}

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">
      <p>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.</p>
    </div>
    <div class="mydiv">
      <p>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.</p>
    </div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>

Expandir fragmento

Sin embargo, a algunos les gusta un solo contenedor que lo abarque todo, por lo que si lo único que busca es un fondo, puede usar un pseudoelemento como este:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  height: 100px;
  position: relative;
}
.mydiv:after {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: orange;
  z-index: -1;
}
footer {
  height: 50px;
  background: #bada55;
}

<div class="container">
  <header></header>
  <div class="mydiv">
    <p>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.</p>
  </div>
  <footer></footer>
</div>

Expandir fragmento

Compatibilidad vwcon IE9+: consulte http://caniuse.com/#feat=viewport-units

Hay casos en los que se requiere contenido real en el div de 100% de ancho y el contenedor no se puede abrir/cerrar a voluntad (tal vez para adaptar un control deslizante).

En esos casos, donde se conoce la altura del nuevo div, se puede utilizar la misma técnica para posicionarlo de modo que tenga el 100 % del ancho de la ventana gráfica:

* {
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  height: 100px;
  position: relative;
}
.myslider {
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: orange;
}
footer {
  height: 50px;
  background: #bada55;
}

<div class="container">
  <header></header>
  <div class="mydiv">
    <div class="myslider">
      <p>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.</p>
    </div>
  </div>
  <footer></footer>
</div>

Expandir fragmento

Demostración de JSfiddle

Nota: hay casos en los que 100vwpuede provocar un desbordamiento y puede aparecer una barra de desplazamiento horizontal. overflow-x:hiddenen la <body>lata se ocupa de eso... no debería ser un problema porque todo lo demás todavía está dentro del contenedor.

Feb 17 '2015 16:02 Paulie_D

Encontré este truco súper útil al usarlo vwen margins( Fuente )

Ejemplo :

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

Demostración:

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);
}

<div class="container">
  <div class="inner-but-full"></div>
</div>

Expandir fragmento

Puedo usar :

http://caniuse.com/#feat=calc

http://caniuse.com/#feat=viewport-units

Jun 03 '2016 10:06 l2aelba