The JavaScript Blog - Everything JavaScript

The Code

$.fn.fill = function(options){
	var settings, container, el, calculateHeight, calculateWidth;

	settings = {
		fill: window,
		margins: {
			x: 0,
			y: 0
		}
	};

	if(options){
		$.extend(settings, options);
	}

	container = $(settings.fill);
	el = $(this);

	calculateWidth = function(){
		return (container.width() - settings.margins.x);
	};

	calculateHeight = function(){
		return (container.height() - settings.margins.y);
	}

	el.css({
		width: calculateWidth(),
		height: calculateHeight()
	});

	container.resize(function(){
	       el.css({
	       width: calculateWidth(),
	       height: calculateHeight()
		});

	});
};

Usage

$('#dashboard').fill({
	margins : {
		x: (80 + $('#sidebar').width()),
		y: 100
	}
});

This snippet fills the entire window with the dashboard minus the sidebar and 100 pixel padding on the y axis.