Como hacer que un div cubra a su padre

publicado por: Anonymous

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.

solución

_x000D_

_x000D_

#padre{_x000D_
   width:10px;_x000D_
   height:20px;_x000D_
   float:left;_x000D_
   position:relative;_x000D_
   overflow:hidden;_x000D_
   background:red;_x000D_
}_x000D_
 _x000D_
#hijo{_x000D_
   width:100%;_x000D_
   height:100%;_x000D_
   position:absolute;_x000D_
   top:0;_x000D_
   bottom:0;_x000D_
   background:blue;_x000D_
}

_x000D_

<div id="padre">_x000D_
<div id="hijo">_x000D_
 </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

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

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *