How to make full div without using width and height property?

Question

I have a code

<div class="outer">
 <div class="inner">A</div>
</div>

My outer is responsive for window size ie width = 100%, height= 100%.

All i need is to make "inner" as height and width of 100%, but without using width and height property for inner?

i.e inner{height: 100%; width : 100%}

Even i dont want use js?

Answer 1

.outer{
position:relative;
}

.inner{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
}

Demo here

Answer 2

Here is the solution:

Using position property.

http://jsfiddle.net/9HTSA/

Answer 3

On the outer div set display:table;

On the inner div set display: table-cell

FIDDLE

Answer 4

we can do with position property

.outer{
position:relative;
}

link : http://www.w3schools.com/css/css_positioning.asp learn this

Answer 5

you can try below code:

<div class="outer" style="width:100%;height:100%">
  <div class="inner" style="display: block;height: inherit;">A</div>
</div>

Answer 6

Visit this Url:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

It uses the float element for the output.