0

Here is my jsFiddle with full code example.

I am trying to implement a sticky footer. As you can see my sign in form is pretty short. Nevertheless the footer should be pinned all the way down to the bottom of the page. I tried:

.footer {
    position: relative;
    width: 700px;
    margin: 0 auto;
    background: url(images/footer.jpg) no-repeat;
}

But this is not working. Any idea what exact JS/CSS I can add to fix my stickiness?

smeeb
  • 27,777
  • 57
  • 250
  • 447

2 Answers2

1

CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

JS

(function ($) {

    var height = $('footer').height();
    //update the  value when page is loaded
    $(document).ready(function () {
    $('body').css({"margin-bottom" : height });

    });

    //update the  value when the browser is resized (useful for devices which switch from portrait to landscape)
    $(window).resize(function () {
    $('body').css({"margin-bottom" : height });
    });

})(jQuery);

HTML

<body>
    <header>
        .....
    </header>
    <div class="content">
        ......
    </div>
    <footer>
        ......
    </footer>
</body>
Miomir Dancevic
  • 6,726
  • 15
  • 74
  • 142
  • Thanks @Gorostas (+1) - I'm curious though, I already have a `.footer { ... }` CSS rule defined in that fiddle. Do I replace it entirely with your footer rule or merge them? In that case, will my `margin-top` cause problems with your declarations? Thanks again! – smeeb Nov 07 '14 at 09:51
  • Better rearange your code with mine, and style it, because this way you can make partial view of footer – Miomir Dancevic Nov 07 '14 at 09:56
0

Here is a pure CSS & HTML. Without any JS.

<html>
<head>
<style>
html, body{
    height:100%;
}
body{
    margin-top: 30px;
}
.header{
    background: #e5e5e5;
}
.wrap{
    min-height:100%;
    height:auto !important;
    height:100%;
    margin:0 auto -60px;
    background: #ccc;
}
.push{
    height:60px;
}
.footer{
    height:100%;
    width:100%;
    height:auto;
    background: #eee;
}
</style>
</head>
<body>
    <header class="header"><h1>Fluid Height Sticky footer simple - IE8+ (no hacks )</h1></header>
    <div class="wrap">
    <p class="content">Content</p>
    </div>
    <div class="push"></div>
    <footer class="footer"><p>Sticky footer</p></footer>
</body>
</html>
Zeljko
  • 25
  • 9