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.
$("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 } );
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.