Make an element extend to full remaining height of its parent, minus height consumed by siblings. For 100% height layouts

jquery.flexheight.js

// Make an element extend to full remaining height of its parent, minus height consumed by siblings. For 100% height layouts
// Usage:
//  $(document).ready(function() {
//    $(".layout-flex-height").flexHeight();
//  });
(function($) {
  $.fn.flexHeight = function() {
    var context = this;
    var handleFlexLayout = function () {
      context.each(function() {
	var flex = $(this);
	var containerHeight = Math.min(flex.parent().height(), $(window).height());
	var usedHeight = flex.parent().outerHeight(true) - flex.parent().height();
	flex.siblings().each(function() {
	  usedHeight += $(this).outerHeight(true);
	});
	flex.height(containerHeight - usedHeight);
	flex.css("overflow", "auto");
      });
    }
    $(window).resize(handleFlexLayout);
    handleFlexLayout();
  }
})(jQuery);

Hi troelskn,

Your jquery plugin is just great.
I added to our web site for being able to fill the empty space in which we have a google map.
Great but I saw it has a little buggy :).
Line var usedHeight = flex.parent().outerHeight(true) - flex.parent().height();
sould be
var usedHeight = 2*(flex.outerHeight(true) - flex.height());
and everithing is ok now.
If we leave like you made it it will not take the right difference beetween doubled beetween the margin and interior of the subject element (it will take the parent one which we do not need).
We need it doubled because the height of the element is without margin, border and padding and we have this on top and at the bottom of the subject element which counts.

Best Regards,
Axente Adrian
adrianaxente@yahoo.com