Question

My page is divided into left and right divs, the right div has a border left partitioning the two. if the height of the right box is bigger then left, it works fine. However if the left box height is more, then the border is only halfway.

How can i resize the height of the right box based on the height of entire screen so that the border runs all the way to the end.

Answer 1

You can provide height to your right div like, place a id ( like rightDiv ) there if not (in jQuery).

$('#rightDiv').height($(window).height());

if you want to height of your entire document use:

$('#rightDiv').height($(document).height());

$(window).height() will retrun available browser window height.

$(document).height() will retrun document height.

or you can make a comparison:

var doc = $(document);
var win = $(window);
var maxHeight =  doc.height() > win.height() ? doc.height() : win.height() ;
$('#rightDiv').height(maxHeight);

You have min-height, for animate height you can try:

$('#rightDiv').animate( { height : maxHeight}, <duration>);

<duration> is optional, you can provide here ‘slow’, ‘fast’, miliseconds