Overview
This HTML & CSS will let you stick your footer to the bottom of your browser window only if there isn't enough content. Should you have enough content it will still push down the footer.
HTML & CSS Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sticky Footer</title>
<style>
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
</style>
</head>
<body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer">Footer content</footer>
</body>
</html>
