¿Hay alguna manera de hacer que el ancho de un DIV secundario sea más ancho que el del DIV principal usando CSS?
¿Hay alguna manera de tener un DIV secundario dentro de un contenedor principal DIV que sea más ancho que su principal? El DIV secundario debe tener el mismo ancho que la ventana gráfica del navegador.
Vea el ejemplo a continuación:
El DIV secundario debe permanecer como hijo del div principal. Sé que puedo establecer márgenes negativos arbitrarios en el div secundario para hacerlo más ancho, pero no puedo entender cómo hacerlo esencialmente 100% del ancho del navegador.
Sé que puedo hacerlo:
.child-div{
margin-left: -100px;
margin-right: -100px;
}
Pero necesito que el niño tenga el mismo ancho que el navegador, que es dinámico.
Actualizar
Gracias por sus respuestas, parece que la respuesta más cercana hasta ahora es convertir el hijo en DIV position: absolutey establecer las propiedades izquierda y derecha en 0.
El siguiente problema que tengo es que el padre tiene position: relative, lo que significa que las propiedades izquierda y derecha siguen siendo relativas al div padre y no al navegador; consulte el ejemplo aquí: jsfiddle.net/v2Tja/2
No puedo quitarlo position: relativedel padre sin arruinar todo lo demás.
Aquí hay una solución genérica que mantiene el elemento secundario en el flujo de documentos:
.child {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
}
Configuramos el widthelemento secundario para que llene todo el ancho de la ventana gráfica, luego hacemos que llegue al borde de la pantalla moviéndolo a leftuna distancia de la mitad de la ventana gráfica, menos el 50% del ancho del elemento principal.
Manifestación:
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow-x: hidden;
}
.parent {
max-width: 400px;
margin: 0 auto;
padding: 1rem;
position: relative;
background-color: darkgrey;
}
.child {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
height: 100px;
border: 3px solid red;
background-color: lightgrey;
}<div class="parent">
Pre
<div class="child">Child</div>
Post
</div>La compatibilidad del navegador con vw y calc() generalmente se puede considerar como IE9 y versiones posteriores.
Nota: Esto supone que el modelo de caja está configurado en border-box. Sin border-box, también tendrías que restar rellenos y bordes, lo que haría que esta solución fuera un desastre.
Nota: Se recomienda ocultar el desbordamiento horizontal de su contenedor de desplazamiento, ya que ciertos navegadores pueden optar por mostrar una barra de desplazamiento horizontal a pesar de que no haya desbordamiento.
Utilice posicionamiento absoluto
.child-div {
position:absolute;
left:0;
right:0;
}
He buscado por todas partes una solución a este problema durante mucho tiempo. Idealmente queremos que el hijo sea mayor que el padre, pero sin conocer de antemano las limitaciones del padre.
Y finalmente encontré una brillante respuesta genérica aquí . Copiándolo textualmente:
La idea aquí es: empujar el contenedor exactamente al centro de la ventana del navegador con left: 50%; luego tirarlo hacia el borde izquierdo con un margen negativo de -50vw.
.child-div {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
