Sticky footer with padding using LESS and Bootstrap 3

Gianluca 3 January 2015 Comments

Basing on this answer I write my version of sticky footer with padding. No more need to use push-wrap logic and stuff like that. Check the code below and change the first two variables (@footer-padding and @footer-inner-height) for adapt it to your needs.

/*
 * Sticky footer
 */

@footer-padding:      40px;  // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)

/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;

html {
 position: relative;
 min-height: 100%;
}
body {
 /* This avoids footer to overlap the page content */
 margin-bottom: @footer-height;
}
footer{
 /* Fix the footer on bottom and give it fixed height */
 position: absolute;
 bottom: 0;
 width: 100%;
 height: @footer-height;
 padding: @footer-padding 0;
}

HTML

<body>
  <div class="content">Page content here</div>
  <footer>Footer code here</footer>
</body>

Gianluca

Web designer and front-end developer at Netgloo. When the sun goes down he's a senior vampire and an experimental artist in illustration, literature and music.