css - only - ¿Cómo puedo expandir un div hijo al 100% de ancho de pantalla si el contenedor div es más pequeño?

responsive html5

Question

El elemento padre de toda la página es un div centrado limitado a un ancho máximo de 960px. Todos los demás elementos en la página son hijos de ese padre div. La estructura simplificada es la siguiente:

<div id="parent">
  <div id="something"></div>
  <div id="wide-div></div>
  <div id="something-else></div>
</div>

Mientras que el div padre no debería expandirse más allá de un ancho de 960 px, el div que denominé "wide-div" aquí debería llenar todo el ancho de la pantalla. Contiene una sola imagen que es más ancha que el 960px, y debe establecer un color de fondo diferente para todo el ancho de la pantalla.

No puedo quitar fácilmente ese div del div padre, estropearía otras partes de mi diseño y haría que todo fuera bastante incómodo.

Encontré algunos trucos sobre cómo puedes lograr esto, pero ninguno parecía satisfacer mis requisitos. Mi diseño es receptivo, o al menos estoy tratando de lograrlo. Los trucos que encontré se basaron en conocer el tamaño de los elementos involucrados, lo que no se soluciona en mi caso.

¿Hay alguna manera de expandir el div interno al ancho de la pantalla completa en un diseño receptivo?

Answer 1

Ahora puedes hacer esto

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

o esto

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

Más detalles: https://css-tricks.com/full-width-containers-limited-width-parents/

Answer 2

Después de mucha investigación, encontré esta solución: crear un contenedor de ancho completo (100%) dentro del contenedor de ancho fijo . Creo que es la mejor solución porque no depende de ningún factor externo, solo del div que desea expandir.

<div class="container" style="width: 750px; margin: 0 auto;">
   <div class="row-full">
     --- Full width container ---
   </div>   
</div>

.row-full{
     width: 100vw;
     position: relative;
     margin-left: -50vw;
     left: 50%;
}

Answer 3

Estoy un poco sorprendido de que nadie haya ofrecido lo siguiente en los últimos 4 años. La position:fixed css position:fixed propiedad position:fixed extrae el elemento y lo escala en relación con la ventana. Hay algunos casos en los que tal vez esto no funciona, pero si está escribiendo un cuadro modal o algo así, esto funciona bien.

.wide-div{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%; // in case you need to cover the height as well
    background-color:rgba(0,0,0,.8); //just so you can see the div is on top of your content
    z-index:1; // you may need to adjust the index of your other elements as well
}

Answer 4

Normalmente, el elemento receptivo, bootstrap o Foundation, le permite agregar un elemento de "fila". Puede colocar el "wide-div" fuera de un elemento con "fila" y debería expandirse para ocupar todo el ancho.

Alternativamente, puede usar el posicionamiento absoluto para ese elemento que ignora la mayoría de las configuraciones heredadas:

.wide-div {
    position: absolute;
    left: 0;
    right: 0;
}

Answer 5

Puede establecer el ancho en función del vw (ancho de la ventana gráfica). También puede usar ese valor usando la función calc , para calcular un margen izquierdo para el div. De esta manera, puede colocarlo dentro del flujo, pero aún sobresaliendo en el lado izquierdo y derecho del div de ancho fijo centrado.

El soporte es bastante bueno. vw es compatible con todos los principales navegadores, incluido IE9 + . Lo mismo calc() para calc() . Si necesita admitir IE8 u Opera Mini, no tiene suerte con este método.

-editar-

Como se mencionó en los comentarios, cuando el contenido de la página es más alto que la pantalla, esto dará como resultado una barra de desplazamiento horizontal. Puede suprimir esa barra de desplazamiento usando body {overflow-x: hidden;} . Sin embargo, sería bueno resolverlo de una manera diferente, pero una solución que usa left y right como se presenta en Ancho: 100% sin barras de desplazamiento no funciona en esta situación.

div {
  min-height: 40px;
  box-sizing: border-box;
}
#parent {
  width: 400px;
  border: 1px solid black;
  margin: 0 auto;
}

#something {
  border: 2px solid red;
}

#wide-div {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  border: 2px solid green;
}

<div id="parent">
  <div id="something">Red</div>
  <div id="wide-div">Green</div>
  <div id="something-else">Other content, which is not behind Green as you can see.</div>
</div>

Answer 6

Puedes usar vw . Demo http://jsfiddle.net/fsLhm6pk/

.parent {
  width: 200px;
  height: 200px;
  background: red;
}

.child {
  width: 100vw;
  height: 50px;
  background: yellow;
}

<div class=''parent''>
  <div class=''child''></div>
</div>

Tienes razón, esto no funcionará con div centrado. Intenta esto en su lugar:

EDITAR http://jsfiddle.net/fsLhm6pk/1/

.parent {
  width: 200px;
  height: 200px;
  background: red;
  margin: 0 auto;
}

.child {
  width: 100%;
  left: 0;
  right: 0;
  position: absolute;
  height: 50px;
  background: yellow;
}

<div class=''parent''>
  <div class=''child''></div>
</div>