¿Hay alguna forma de hacer que div sea más grande que su padre? Sé que es una mala práctica. Básicamente, tengo un div que es pequeño y necesito crear un div dentro del cual estará a través de toda la ventana. Pero no puedo encontrar la manera de hacerlo. Gracias por cualquier ayuda.
Debe "hacer estallar" ese elemento del flujo normal con la regla de position con las dimensiones especificadas. Por ejemplo position: fixed;
.outer { width: 10vw; height: 10vh; position: relative; background: rgba(130, 130, 255, .3); border: 1px solid red; } .inner { width: 90vw; height: 90vh; position: absolute; left: 5px; top: 5px; background: rgba(130, 255, 130, .3); border: 1px solid green; } <div class="outer"> <div class="inner"></div> </div>Alternativa
Tener overflow: visible con dimensiones especificadas
.outer { width: 10vw; height: 10vh; position: relative; background: rgba(130, 130, 255, .3); border: 1px solid red; overflow: visible; display: inline-block; vertical-align: top; } .inner { width: 90vw; height: 90vh; margin: 5px; margin: 5px; background: rgba(130, 255, 130, .3); border: 1px solid green; } <div class="outer"> <div class="inner"></div> </div>Puedes hacerlo fácilmente. ¡Siempre que el padre no tenga overflow: hidden , incluso puede definir sus dimensiones con píxeles y verlo funcionar!
.parent { height: 40px; width: 40px; background: red; } .child { height: 100px; width: 100px; background: transparent; border: 1px solid green; } <div class="parent"> <div class="child"></div> </div> Si lo desea en toda la pantalla, puede usar vh y vw :
.child { height: 100vh; width: 100vw; background: transparent; border: 1px solid green; }Puede usar el tamaño absoluto en CSS para que un div secundario sea más grande que el principal. También deberá agregar los atributos top e left y establecerlos en 0. Esto enmarcará el div para que comience en la esquina superior izquierda.
Si desea que un div tenga el ancho y el alto completos de la ventana gráfica, use el siguiente CSS:
.parent { position: relative; width: 120px; height: 120px; border: 1px solid red; } .child { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; border: 1px solid blue; } <div class='parent'> <div class='child'> </div> </div> Esto permitirá que el div cambie de tamaño según las dimensiones de la pantalla del usuario.
Puede encontrar más información sobre el tamaño de CSS aquí .