4

Quiero que un div#cover cubra a su padre

<div>
    <div id="cover"></div>
    ...
</div>

Si no hubiese más contenido (puntos suspensivos: otros div's) sería fácil:

#cover {
  height: 100%;
  width: 100%;
}

De momento lo tengo solucionado haciendo que #cover esté en posición absoluta y asignándole la altura mediante javascript, sino el 100% sería de toda la pantalla. Pero me gustaría utilizar una solución CSS pura sin Javascript, en caso de que se pueda.

2 respuestas 2

4

#padre{
   width:10px;
   height:20px;
   float:left;
   position:relative;
   overflow:hidden;
   background:red;
}
 
#hijo{
   width:100%;
   height:100%;
   position:absolute;
   top:0;
   bottom:0;
   background:blue;
}
<div id="padre">
<div id="hijo">
 </div>
</div>

el hijo es de color azul, cubre todo al padre. con width:100% y height:100%

el padre tiene position relative, el hijo position absolute

1
  • Muchas gracias, el relative es algo que todavía me cuesta manejar. Respuesta de 10.
    – Quidi90
    Commented el 17 ene. 2017 a las 14:30
3

Podrías lograrlo de la siguiente forma:

  • Al elemento padre, le asignas position: relative;
  • Al elemento cover, le asignas position: absolute; y luego puedes usar porcentajes relativos al tamaño del padre.

Así por ejemplo:

function toggle() {
  var el = document.querySelector('.cover');
  el.style.display = el.style.display == 'none' ? 'block' : 'none';
}
.container {
  position: relative;
  padding: 8px;
  background-color: rgb(255, 0, 0);
}
.cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, .7)
}
<div class="container">
    <div class="cover"></div>
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. <br/>
    Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
</div>
<button onclick="toggle()">Mostrar/Ocultar cover</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.