JQuery -diven div, stretch div height to reach bottom

Question

Given the div on the page, for example <div id="rightRail>xxx</div>

Is it possible somehow, how magically to change the size of the div to the size of the load / change the browser 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 is not. thank

Answer 1

You need .offset() ^{help the} upper value and innerHeightfrom the current window to install it .height() ^help . It will look like this:

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

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

Answer 2

, jAndy div 0. , div. , , .

$('#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 to get the window height:

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 heightyour div dynamically as follows:

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

After you can manipulate the variable heightOfDivby adding or subtracting pixels to suit your needs.

Maybe this will work for you.