martynchamberlin/DOM.html

## DOM.html
<html>
    <head>
    </head>
    <body>
        <!-- the fact that this main block has an ID of #wrap has no actual bearing on this plugin -->
        <div id="wrap">Main site content goes here, though the div doesn't
          really have to close before footer begins. That doesn't matter either
          way, which is what I think makes this solution so beautiful.
        </div>
        <footer>Copyright 2014</footer>
    </body>
</html>

## site.js
jQuery(document).ready(function( $ )
{
	function sticky_footer( initialize )
	{
		if ( initialize )
		{
			$('footer').wrap('<div class="footer-wrap"></div>');
		}

		// Remove the class real quick so we can "test" it to see if
		// we really still need it
		$('.footer-wrap').removeClass('absolute');

		var f_offset = $('.footer-wrap').offset();
		var f_height = $('.footer-wrap').outerHeight();
		if ( f_offset.top + f_height < $(window).height() )
		{
			$('.footer-wrap').addClass('absolute');
		}
		else
		{
			$('.footer-wrap').removeClass('absolute');
		}
	}
	sticky_footer( true );
	$(window).resize(function()
	{
		sticky_footer( false );
	});
}

## style.css
.footer-wrap.absolute {
	position: absolute;
	bottom: 0;
	width: 100%;
}
	<html>
	<head>
	</head>
	<body>
	<!-- the fact that this main block has an ID of #wrap has no actual bearing on this plugin -->
	<div id="wrap">Main site content goes here, though the div doesn't
	really have to close before footer begins. That doesn't matter either
	way, which is what I think makes this solution so beautiful.
	</div>
	<footer>Copyright 2014</footer>
	</body>
	</html>
	jQuery(document).ready(function( $ )
	{
	function sticky_footer( initialize )
	{
	if ( initialize )
	{
	$('footer').wrap('<div class="footer-wrap"></div>');
	}

	// Remove the class real quick so we can "test" it to see if
	// we really still need it
	$('.footer-wrap').removeClass('absolute');

	var f_offset = $('.footer-wrap').offset();
	var f_height = $('.footer-wrap').outerHeight();
	if ( f_offset.top + f_height < $(window).height() )
	{
	$('.footer-wrap').addClass('absolute');
	}
	else
	{
	$('.footer-wrap').removeClass('absolute');
	}
	}
	sticky_footer( true );
	$(window).resize(function()
	{
	sticky_footer( false );
	});
	}
	.footer-wrap.absolute {
	position: absolute;
	bottom: 0;
	width: 100%;
	}