Skip to content

Instantly share code, notes, and snippets.

@tachekent

tachekent/index.html

Created September 25, 2013 15:32
Show Gist options
  • Save tachekent/6701421 to your computer and use it in GitHub Desktop.
Save tachekent/6701421 to your computer and use it in GitHub Desktop.
Download ZIP
Sticky Footer by Ryan Fait http://ryanfait.com/
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 CSS Sticky Footer</title>
<meta name="description" content="The original and simplest sticky footer CSS modified for HTML5.">
<link rel="stylesheet" type="text/css" media="screen" href="layout.css">
</head>
<body>
<div class="wrapper">
<header>
<h1>HTML5 CSS Sticky Footer</h1>
</header>
<article>
<h2>Ryan Fait's HTML5 CSS Sticky Footer</h2>
<p>Like the <a href="/sticky-footer/">original CSS Sticky Footer</a>, this <strong>HTML5 Sticky Footer</strong> works in virtually all browsers to make a website's footer 'stick' to the bottom of the page even when the content is short. As many web designers are designing in HTML5, including myself, I decided it was time add this as a companion to <a href="/sticky-footer/">the original</a> for those of you using HTML5.</p>
<h2>Implementation of the Sticky Footer</h2>
<p>The CSS and HTML have only minor changes. If you want it to work in IE8 and below, you will need to include the <a href="js/html5.js">HTML5 JavaScript file</a> (in between the &lt;head&gt; tags) which creates HTML5 elements like header, footer, etc., and remember to set HTML5 elements as block. Just like the original, there are no terms, licenses, fees or requirements.</p>
<p>I love links back to my site and emails from people who love the <strong>HTML5 CSS Sticky Footer</strong>!</p>
<div class="fb-like" data-href="http://ryanfait.com/sticky-footer-html5/" data-send="false" data-width="450" data-show-faces="false"></div>
</article>
<aside>
<p class="download"><a href="layout.css" title="Download the stylesheet">View the CSS</a> or <a href="/resources/footer-stick-to-bottom-of-page/" title="Make a footer stick to the bottom of a page">learn about using it</a></p>
</aside>
<div class="push"></div>
</div>
<footer>
<p>This <strong>HTML5 CSS Sticky Footer</strong> simply stays put.</p>
<p class="copyright">Copyright &copy; 2013 Ryan Fait &mdash; <a href="http://ryanfait.com/" title="Las Vegas Web Design">Las Vegas Web Design</a></p>
</footer>
</body>
</html>
Raw
layout.css
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 155px; /* '.push' must be the same height as 'footer' */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment