根据窗户内部高度更改Div高度

Question

I need a little help here.

I want to change the height of div according to the screen inner height for which i have written a java script which is as follows

<script>
function height()
{
var h = window.innerHeight;

document.getElementById("bg").style.height = h; 
}
</script>

Whenever i use

document.getElementById("bg").style.height = h; 

i doesn't write anything to the div element #bg but when i define a height in px like 500px i does write height in div element #bg.

Answer 1

You'll need to add 'px' to the height value:

function height()
{
var h = window.innerHeight;

document.getElementById("bg").style.height = h+'px'; 
}

And obviously call the function at some point

height();

Check out the fiddle - http://jsfiddle.net/MRttV/

Answer 2

You can use pure css to do this I guess. by defining:

   body,
     html {
     height: 100%;
   }
   #bg {
     height: 100%;
     width: 100%; /* or the value you want if element is empty */
   }

Or you can also use the "vh" value. But it doesn't work on old browsers