Skip to content

Instantly share code, notes, and snippets.

@jdlich

jdlich/markup.html

Created November 29, 2012 03:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jdlich/4166622 to your computer and use it in GitHub Desktop.
Save jdlich/4166622 to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic height sticky footer
Raw
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>
Raw
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
});
}
}
})();
Raw
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 */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment