DIV 100％父级宽度和高度

Question

I have this markup:

<div>
     <div class="inner"></div
     <img src="blabla" />
</div>

How to make .inner 100% width and 100% height of its parent div dimensions? Parent div's dimensions rely on img dimensions.

Is it possible to do this with CSS? I don't want JS solution as it's obvious. Thanks

http://jsfiddle.net/7cSzV/

Answer 1

See this fiddle : http://jsfiddle.net/vSE7S/2/

CSS

.outer { position: relative; }
.inner {
    position: absolute;
    top: 0; left: 0;
    background: black;
    height: 100%;
    width: 100%;
}
img { display: block }

(I just gave an .outer class to the outer div, for the sake of the simplicity)

note: try also to assign display: inline-block to the outer div: the resulting effect is slightly different, see http://jsfiddle.net/vSE7S/3/ — just choose the effect that fits best to your needs.

Answer 2

You might change the css and add a class to that parent div

.inner {
    background: black;
    /* position: absolute; */
    width: 100%;
    height: 100%;
    /*width: 100px;
    height: 100px;*/
}
div.parentDiv{
    position: relative;
}