Set the height of screen to the height of div in CSS - css

Question

I have been working on HTML5, javascript and CSS and i want to get the height of screen and set the height of my "div" accordingly in CSS only without using javascript and jquery.. so that it adjusts itself to any screen.
I've tried using height=100% but it takes the height as long as div's content.
Any idea plzz help me out..
Thanks in advance!!

Answer 1

Setting height=100% should work - make sure that the containing elements are also set to 100% height, and add position:absolute
Here's a fiddle:
http://jsfiddle.net/C3anM/
<div id="wrapper">Test content </div>
+
#wrapper {
height:100%;
background-color:green;
position:absolute;
}

Answer 2

i think you are trying to absolute position it.
div{
height:100%;
width:100%;
position:absolute;
border:1px solid red;
}
http://jsfiddle.net/btevfik/DMUcY/
by default the position is static.so the div's are positioned in order and their height is calculated by their content unless you set a px value for height.
http://jsfiddle.net/btevfik/MjM9Y/

Answer 3

You have to set:
html, body
{
height: 100%;
}
jsFiddle: http://jsfiddle.net/sG8gm/

Answer 4

I think you might be looking for viewport-relative css units. They're not supported across the board at the moment, but they are very well-supported among users with modern browsers.
The spec defines them as follows:
vw unit
Equal to 1% of the width of the initial containing block.
vh unit
Equal to 1% of the height of the initial containing block.
vmin unit
Equal to the smaller of ‘vw’ or ‘vh’.
vmax unit
Equal to the larger of ‘vw’ or ‘vh’.
Typical percentage-widths size the element relative to the nearest parent, or, in the case with absolute positioning, the closest parent with position: relative; whereas viewport-relative lengths will always be calculated relative to.... the viewport, regardless of the parent elements in the tree.