CSS: cómo desbordar de div a ancho completo de pantalla

Question

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 de 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 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?

Answer 1

Encontré este truco súper útil usando vw en los margins ( Source )

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

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

Puedo usar :

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

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

Answer 2

La solución más obvia es simplemente cerrar el contenedor ... tener su div de ancho 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 este caso, aplica el color de fondo al div de ancho completo y no necesita aplicar un color al div restringido interno.

* {
  -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>

Sin embargo, para algunos les gusta un solo contenedor que lo abarca todo, por lo que si todo lo que buscas es un fondo, puedes usar un pseudo-elemento 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>

La compatibilidad con vw es IE9 +: consulte http://caniuse.com/#feat=viewport-units

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

En esos casos, donde se conoce la altura del nuevo div, se puede usar la misma técnica para posicionarlo con un ancho de ventana 100%:

* {
  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>

JSfiddle Demo

Nota: hay casos en los que 100vw puede causar desbordamiento y puede aparecer una barra de desplazamiento horizontal. overflow-x:hidden en el <body> puede atender eso ... no debería ser un problema porque todo lo demás todavía está dentro del contenedor.

Answer 3

<meta charset="UTF-8">
<style type="text/css">p{text-align:center;margin-left:25%;height:300px;width:50%;border:1px solid red;margin-bottom:0;margin-top:0;padding:0;
} body{margin:0;text-align:center;height:100%;width:100%;max-width:100%;max-height:100%;}</style>
<p style="color:yellow;background-color: red;">yep</p><p style="color:red;background-color: yellow;">yep</p><p style="color:white;background-color: blue;">yep</p>