Responsive Bootstrap Sticky Footer Height

Question

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

score 7 · Accepted Answer · answered Jun 05 '13 at 08:47

7

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;
    }
}

answered Jun 05 '13 at 08:47

albertedevigo

5

This doesn't seem to work anymore with the latest version of Bootstrap? – wnajar Sep 20 '14 at 00:24
I cannot reproduce the original issue with the latest version of Bootstrap, could you please report what OS and browser are you using? – albertedevigo Sep 22 '14 at 14:28
Windows 8, Chrome 37.0.2062.120 m – wnajar Sep 22 '14 at 22:42
Probably because the viewport max width is emulated. – wnajar Sep 22 '14 at 22:43

score 3 · Answer 2 · answered Jul 28 '13 at 07:11

3

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

answered Jul 28 '13 at 07:11

cfx

The example is still online but the URL changed: http://getbootstrap.com/examples/sticky-footer-navbar/ – clarif Mar 19 '14 at 14:32
2

@clarif As mentioned below - the bootstrap example uses a fixed height and is not responsive. – Jonathan Sep 05 '15 at 04:18
@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. – cfx Dec 25 '15 at 14:10

2 Answers2