Resize div on browser resize

Question

I have a <div> which I want to display full screen, but I also need to incorporate a 60px high <div> and a 10px high <div> at the top of the document. The size of the main div will need to re-size as the browser window is re-sized to keep it full screen.

<div id="div1" style="height: 60px">

</div>

<div id="div2" style="height: 10px">

</div>

<div id="fullscreen">

</div>

So:

fullscreen height = document size - (#div1 + #div2)

On re-size recalculate the above value.

Answer 1

One way to achieve this in some cases via just HTML and CSS is to have absolutely positioned div with it's top set to the 70px and every other direction set to 0px. Then every other side will adjust itself to the edges of the browser window.

For example:

<style type="text/css">
#fullscreen {
    background-color: #0000FF;
    position: absolute;
    top: 70px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
</style>

<div id="fullscreen">The Full Screen</div>

Answer 2

Try this:

$(window).resize(function(){
  $('#fullscreen').height($(document).height() - ($('#div1').height() + $('#div2').height()) + 'px');
});

Updated Based On Comment:

I am using the jQuery in above code, you will have to download and include it in your page first.

Once you have downloaded and included in your page, then use this code:

$(function(){
    $(window).resize(function(){
      $('#fullscreen').height($(document).height() - ($('#div1').height() + $('#div2').height()) + 'px');
    });
});