tags that can resize themselves as the window or another container are resized.

Options

Accepts either a jQuery selector that specifies the container element, or you can pass an object map any of the following properties (default values are shown):

var opt = {
   container: $(window),
   bottomOffset: 0,
   autoResize: false
};

The options parameter values are:

Container
The container element that the selector's element(s) are stretched to the bottom of. If not specified the DOM window object is used as the container.

bottomOffset
The offset from the bottom to add to the bottom location. This can be useful to adjust for other elements like a footer on the bottom of a container and still have the container render up to that element.

autoResize
When true causes the the element to be resized whenever the container is resized.

Examples

If you're recentering to the bottom of the window you can simply call the plug-in method without parameters:

$("divList").stretchToBottom();

This stretches the element to the bottom of the window border. If you want to stretch to a different element pass a jQuery selector:

$("divList").stretchToBottom( $("divPageContainer") );

to specify the container element.

Finally you can also pass an options object to specify any of the available options.

$("divList").stretchToBottom( { container: $("divPageContainer"), bottomOffset: 16px } );

Typical Operation

Often when resizing containers you may end up resizing several containers. For example you may have a two column layout with a wrapping container object that contains the two column elements. The top container might stretch to the bottom.

To do this you'll need to first resize the container to the bottom of the window, then resize the to containing elements. Here's an example that demonstrates:

page = {};
page.resizePanes = function() {
    // outer frame
    $("#FrameContainer").stretchToBottom();

    // the left and right panes
    $("#ListContainer,#ShowEntryContainer").stretchToBottom($("#FrameContainer"));

    // the iframe in the right pane
    $("#EntryFrame").stretchToBottom($("#ShowCategoryContainer"));

    // the list inside of the right frame
    $(".scrollbox").stretchToBottom($("#ListConainer"));
}

which is then called during the page startup with:

$(document).ready(function () {
    page.resizePanes();
    $(window).resize(page.resizePanes);
});

Note that you typically want to call this once to do your intial resizing and then resize whenever the window (or whatever other element) changes size again.