CODEWITHSUNDEEP
csstwitter-bootstrap
smeeb
smeeb

Reputation: 29477

Bootstrap 3: Sticky footer not so sticky

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?

Upvotes: 0

Views: 317

Answers (2)

Zeljko
Zeljko

Reputation: 25

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>

Upvotes: 0

Miomir Dancevic
Miomir Dancevic

Reputation: 6852

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>

Upvotes: 1

Related Questions