jQuery -given a div, extend the div's height to reach the bottom

Question

Given a div on a page like <div id="rightRail>xxx</div>

Is it possible to some how magically make that div's height resize on broswer load/resize so that the height reaches the bottom of the window? It would be easier if the div was at the top of the page, but it isnt. thanks

Answer 1

You need the .offset()^help top value and the innerHeight from the current window to set its .height()^help. This would look like:

$('#div').height(function(index, height) {
    return window.innerHeight - $(this).offset().top;
});

Demo: http://jsfiddle.net/d3ays/

Answer 2

If the page is taller than the browser window jAndy's solution will end up setting the div height to 0. It also doesn't take into account any padding that may be applied to the div. Here is code that compares the heights as well as adjusts for padding.

$('#div').height(function(index, height) {
    var current_height = $(this).height();
    var new_height = window.innerHeight - $(this).offset().top - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
    if (new_height > current_height) return new_height;
});

Answer 3

You can try the following code where this function is used for getting the height of window:

function GetHeight()
{
    var y = 0;
    if (self.innerHeight)
    {
            y = self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight)
    {
            y = document.documentElement.clientHeight;
    }
    else if (document.body)
    {
            y = document.body.clientHeight;
    }
    return y;
}

And then use jQuery to give height to your div dynamically like this:

 document.ready(function(){
  var heightOfDiv = GetHeight();
  jQuery('#rightRail').css("top",heightOfDiv +"px");
});

After you can manipulate the variable heightOfDiv by adding or subtracting pixels according to your need.

Maybe this works for you.