Skip to content

Instantly share code, notes, and snippets.

@miskolc

miskolc/gist:6c81ac4cef28519c9e48

Last active August 29, 2015 14:18
Show Gist options
  • Save miskolc/6c81ac4cef28519c9e48 to your computer and use it in GitHub Desktop.
Save miskolc/6c81ac4cef28519c9e48 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Martin Bean" />
<title>Twitter&rsquo;s Bootstrap with Ryan Fait&rsquo;s Sticky Footer</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -63px;
}
.push {
height: 63px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 60px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<header class="hero-unit">
<h1>Twitter&rsquo;s Bootstrap with Ryan Fait&rsquo;s Sticky Footer</h1>
<p>It's really <strong>not</strong> that hard, y&rsquo;know. Check out the source code and <abbr title="Cascading Style Sheets">CSS</abbr> of this web page for how to do it yourself.</p>
</header>
</div>
<div class="push"><!--//--></div>
</div>
<footer>
<div class="container">
<p>Put together in less than five minutes by <a href="http://www.martinbean.co.uk/" rel="author">Martin Bean</a>. Uses <a href="http://twitter.github.com/bootstrap/" rel="external">Twitter Bootstrap</a> and <a href="http://ryanfait.com/sticky-footer/" rel="external">Ryan Fait&rsquo;s Sticky Footer</a>.</p>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment