silverstripe-cms/javascript/jquery-fitheighttoparent/jquery.fitheighttoparent.js

/**
 * Fits an element's height to its parent by substracting
 * all (visible) siblings heights from the element.
 * Caution: This will set overflow: hidden on the parent
 *
 * Copyright 2009 Ingo Schommer, SilverStripe Ltd.
 * Licensed under MIT License: http://www.opensource.org/licenses/mit-license.php
 *
 * @todo Implement selectors to ignore certain elements
 *
 * @author Ingo Schommer, SilverStripe Ltd.
 * @version 0.1
 */
jQuery.fn.extend({
	fitHeightToParent: function() {
		return jQuery(this).each(function() {
			var $this = jQuery(this);

			var boxmodel = ['marginTop','marginBottom','paddingTop','paddingBottom','borderBottomWidth','borderTopWidth'];
		
			// don't bother if element or parent arent visible,
			// we won't get height readings
			if($this.is(':visible') && $this.parent().is(':visible')) {
				
				// we set overflow = hidden so that large children don't muck things up in IE6 box model
				var origParentOverflow = $this.parent().css('overflow');
				$this.parent().css('overflow', 'hidden');
				
				// get height from parent without any margins as a starting point,
				// and reduce any top/bottom paddings
				var height = $this.parent().innerHeight() 
					- parseFloat($this.parent().css('paddingTop'))
					- parseFloat($this.parent().css('paddingBottom'));

				// substract height of any siblings of the current element
				// including their margins/paddings/borders
				$this.siblings(':visible').filter(function() {
					// remove all absolutely positioned elements
					return (jQuery(this).css('position') != 'absolute');
				}).each(function() {
					height -= jQuery(this).outerHeight(true);
				});

				// remove margins/paddings/borders on inner element
				jQuery.each(boxmodel, function(i, name) {
					height -= parseFloat($this.css(name)) || 0;
				});

				// set new height
				$this.height(height);
				
				// Reset overflow
				$this.parent().css('overflow', origParentOverflow);
			}
		});
	}
});