Responsive Bootstrap Sticky Footer Height

Question

When the window is resized, the height of the footer expands but not the background color. Help!

http://twitter.github.io/bootstrap/examples/sticky-footer.html

Solution 1

height: auto seems to solve the problem. You can include it with a media query for small viewports:

@media only screen and (max-device-width: 480px) {
    #footer {
        height: auto;
    }
}

Solution 2

Your demo doesn't work anymore but the best Bootstrap sticky footer I've found is: https://gist.github.com/aalaap/3066704

Comments

[clarif]

The example is still online but the URL changed: getbootstrap.com/examples/sticky-footer-navbar

[wnajar]

This doesn't seem to work anymore with the latest version of Bootstrap?

[albertedevigo]

I cannot reproduce the original issue with the latest version of Bootstrap, could you please report what OS and browser are you using?

[wnajar]

Windows 8, Chrome 37.0.2062.120 m

[wnajar]

Probably because the viewport max width is emulated.

[Jonathan]

@clarif As mentioned below - the bootstrap example uses a fixed height and is not responsive.

[cfx]

@ShyamalParikh Yes, it does. You're welcome to post a link to a fiddle with an example where you can't get it to work and I'm sure someone will be able to help you get it working.