Skip to content

Instantly share code, notes, and snippets.

@purwandi

purwandi/sticky.css

Forked from mokagio/sticky.css
Created November 23, 2012 09:17
Show Gist options
  • Save purwandi/4134699 to your computer and use it in GitHub Desktop.
Save purwandi/4134699 to your computer and use it in GitHub Desktop.
Download ZIP
Twitter Bootstrap + Sticky Footer + Fixed Nav Bar
Raw
sticky.css
html, body, .container, .content {
height: 100%;
}
.container, .content {
position: relative;
}
.proper-content {
padding-top: 40px; /* >= navbar height */
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* same as the footer */
}
.push {
height: 50px; /* same as the footer */
}
.footer-wrapper {
position: relative;
height: 50px;
}
Raw
template.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="sticky.css" />
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">EngineerGio's Sticky Bootstrap</a>
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="wrapper">
<div class="proper-content">
<div class="row">
<div class="span12">
Content
</div>
</div>
</div><!-- /.proper-content -->
<div class="push"></div>
</div><!-- /.wrapper -->
<div class="footer-wrapper">
<footer>That's the sticky footer</footer>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment