Div with fixed height at 100%

Question

So I am trying to get a div to cover 100% height of the window which is simple but then I do not want it to resize when the browser is resized. I cannot used a fixed height such as - height: 900px as it will differ between browser and device being used. I have tried to use the following jquery:

$(document).ready(function() {
    var screenHeight = $(window).height();
    $('#home').css('height', screenHeight + 'px');
});

This works to a certain degree but the problem is, if the site is visited while the browser is not in full screen it will set it to that height and then won't get bigger, I need it to set to the height of the browser IF the browser was maximized, is that possible?

You can see what I have so far at: http://zimxtrial.ukbigbuy.com/ - try refreshing the page with different browser heights and then resizing to see what I mean.

Answer 1

You could use screen.height or screen.availHeight (gets the screen resolution rather than the browser viewport):

Example

Answer 2

use $(window).resize it will update the selector whenever browser height changes

Try this

<script type='text/javascript'>

$(function(){
    var iniHeight = $(window).height();
    $('#home').css('height', iniHeight + 'px');
    $(window).resize(function(){
    var newHeight = $(window).height();
    $('#home').css('height', newHeight + 'px');
    });
});
</script>

Answer 3

Try to use resize() like,

$(document).ready(function() {
    var screenHeight = $(window).height();
    $('#home').css('height', screenHeight + 'px');
    $(window).resize(function(){ // change home height on window resize event
       $('#home').css('height', $(this).height()+ 'px');
    });
});