Loading Image

Almost there...

Loading Image

Loading...

Sticky Footer

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.
17 August 2017 - 10:00
Downloads: 784
Category: HTML / CSS
Sticky Footer
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>