Skip to content

Instantly share code, notes, and snippets.

@mokagio

mokagio/sticky.css

Created February 26, 2012 20:53
Show Gist options
  • Save mokagio/1918937 to your computer and use it in GitHub Desktop.
Save mokagio/1918937 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>
@mociepka
Copy link

It is a simple way, set overflow to auto in wrapper class and margin-top to @navbarHeight in first wrapper child .

@lynx-r1
Copy link

lynx-r1 commented Oct 29, 2012

How do align a footer if navbar has static position?

    position: static;
}

@jteneycke
Copy link

I kept putting my padding on the body, but a separate top-push (aka .proper-content) works perfectly. Thank you! 😄

@davidtzvi
Copy link

Hey there, any chance you can point me in the right direction for making the footer background-color extend 100% of the viewport?

@Jermanis
Copy link

I second davidtzvi's comment.. "Hey there, any chance you can point me in the right direction for making the footer background-color extend 100% of the viewport?"

@jerimiahshort
Copy link 

.footer-wrapper {
    position: relative;
    height: 50px;
    width: 100%; /* Add this line for full width */
    background-color: #000; /* ofc you need the color */
}

@mokagio
Copy link
Author

mokagio commented Feb 5, 2015

😱 hey guys, @davidtzvi and @Jermanis, I've had no idea you ever commented on this gist till now, almost 2 years later! I do apologise for not having replied to you 😞

Thanks to @jerimianhshort for the help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment