jdlich · November 29, 2012 03:31
diff --git a/markup.html b/markup.html
 <html>
 <head>

  <!--[if !IE 7]>
    <style type="text/css">
      .wrapper {
        display: table;
        height: 100%
      }
    </style>
  <![endif]-->

 </head>
 <body>
  <div class="wrapper">
    <div class="container">

      <!-- content -->

    </div>
  </div>

  <footer></footer>
 </body>
 </html>
diff --git a/script.js b/script.js
 (function () {        
  $(document).ready(function() {
    setFooterHeight();
  });
  
  $(window).resize(function() {
    setFooterHeight();
  });
  
  function setFooterHeight() {
    var container    = $(".container"),
        footer       = $("footer"),
        overlap      = 25,
        footerHeight = $(window).height() - container.height(),
        totalHeight  = footerHeight + overlap;
    
    if ( footerHeight < 0 ) {
      footer.css({
        "margin-top" : -overlap
      });
    } else {
      container.css({
        "padding-bottom" : footerHeight
      });
      footer.css({
        "margin-top" : -totalHeight,
        "height"     : totalHeight 
      });
    }
  }
 })();
diff --git a/styles.css b/styles.css
 html, body {
  height: 100%;
 }
 .wrapper {
  min-height: 100%;
 }
 .container {
  overflow: auto;
  /* padding-bottom: x */
 }
 footer {
  position: relative;
  clear: both;
  /* height: x */
  /* margin-top: -x */
 }
	(function () {
	$(document).ready(function() {
	setFooterHeight();
	});

	$(window).resize(function() {
	setFooterHeight();
	});

	function setFooterHeight() {
	var container = $(".container"),
	footer = $("footer"),
	overlap = 25,
	footerHeight = $(window).height() - container.height(),
	totalHeight = footerHeight + overlap;

	if ( footerHeight < 0 ) {
	footer.css({
	"margin-top" : -overlap
	});
	} else {
	container.css({
	"padding-bottom" : footerHeight
	});
	footer.css({
	"margin-top" : -totalHeight,
	"height" : totalHeight
	});
	}
	}
	})();