Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Twitter Bootstrap + Sticky Footer + Fixed Nav Bar
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;
}
<!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

This comment has been minimized.

Show comment Hide comment
@mociepka

mociepka Sep 28, 2012

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

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

@lynx-r1

This comment has been minimized.

Show comment Hide comment
@lynx-r1

lynx-r1 Oct 29, 2012

How do align a footer if navbar has static position?

    position: static;
}

lynx-r1 commented Oct 29, 2012

How do align a footer if navbar has static position?

    position: static;
}

@jteneycke

This comment has been minimized.

Show comment Hide comment
@jteneycke

jteneycke May 30, 2013

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

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

@davidtzvi

This comment has been minimized.

Show comment Hide comment
@davidtzvi

davidtzvi Nov 26, 2013

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

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

@Jermanis

This comment has been minimized.

Show comment Hide comment
@Jermanis

Jermanis Feb 15, 2014

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?"

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

This comment has been minimized.

Show comment Hide comment
@jerimiahshort

jerimiahshort May 20, 2014

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

This comment has been minimized.

Show comment Hide comment
@mokagio

mokagio 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.

Owner

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