根据页面/屏幕高度调整大小

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

Answer 2

Another solution would be this pure CSS one: http://jsfiddle.net/zgMv5/
You put around the left and the right div another <div> and use it as CSS table row. Then the 2 containing <div> will be the same height.

<div id="outer">
  <div id="left">This is some text.</div>
  <div id="right">This is some text.</div>
</div>

The corresponding CSS would look like this:

div#outer {
    display:table-row;  }
div#outer > div {
    display:table-cell;  }
div#left  {
    border-right:1px solid red;  }

I am not sure about the compatibility with old browsers...