make a DIV take 100% of available height

to make a DIV take 100% of available height, then typically the parent div(s) need to have a known height OR have their height set to a %.

one approach is to programatically set the height of all parent(s) up to a certain level:

var div = $('#myFullHeightDiv);
 
while(!div.hasClass('topAncestorClass')) {
    div.css('height', '100%');
    div = div.parent();
}

more details:
http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm


hints:
- if the children have borders that are causing scrollbars to appear:
try set overflow:hidden;
- if this causes parts of child to be cropped, then try setting suitable padding on the container div
- in Chrome, when inspecting an element, the highlight color matches the colors used by the Computed pane (so blue = content, green = padding, orange = border, peach = margin)