jQuery Mobile: Stick footer to bottom of page

Question

Is there any way, bearing in mind the way the jQuery Mobile framework operates, to fix the page so that the footer always aligns with the bottom of the page - no matter the height.

As it stands the height of a jQuery page will change, especially as devices are rotated portrait to landscape, so the solution would have to take this into account.

Just to clarify - I don't need the footer to be at the bottom of viewport, just working so that the default page height doesn't drop below the viewport height.

Thanks.

this worked for me: http://stackoverflow.com/questions/4724068/how-to-keep-jquery-mobile-header-and-footer-fixed — botbot, Jun 11 '12 at 02:53
that worked for me too. it seems the top answer is out of date ? — commonpike, Jun 13 '12 at 13:58

Philip · Accepted Answer · 2013-12-12T08:16:09.633

115

You can add this in your css file:

[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}

So the page data-role now have 100% height, and footer is in absolute position.

Also Yappo have wrote an excellent plugin that you can find here: jQuery Mobile in a iScroll plugin http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

hope you found the answer!

An answer update

You can now use the data-position="fixed" attribute to keep your footer element on the bottom.
Docs and demos: http://view.jquerymobile.com/master/demos/toolbar-fixed/

edited Dec 12 '13 at 08:16

answered Oct 25 '11 at 06:19

Philip

5,011
2
30
36

5

This fixed the problem for PC-sized displays. However, on mobiles, now the footer sticks about halfway through the page. Therefore, I do not think that this solution works. However, I do like the CSS-only approach. – zzz Jan 26 '12 at 18:26
Tried this and the footer stuck to the bottom of the screen until I tried scrolling. The footer moved along with everything else. The Yappo link did seem to work, though. – Kevin Schroeder May 19 '12 at 02:18
@KevinSchroeder Nice you found Yappo's solution working! jQuery Mobile has update the plugin and i don't know the reason it's not working at your project. What version you run? – Philip May 19 '12 at 05:14
yappo.github.com doesn't work in chrome, only thing i looked at it in. items don't scroll at all. – botbot Jun 11 '12 at 02:48
2

I prefer position:fixed for a footer that I expect to always be available at the bottom. – Nathan Fig Jul 30 '12 at 20:19
This did not work well for me at all (neither the code or the Yappo demo page). I posted an answer on this thread of the solution I came up with: http://stackoverflow.com/questions/12377016/jquery-mobile-sticky-footer/12828302#12828302 – Nick B Oct 10 '12 at 21:05
Thanks @Nick, this question is 1 year old and since that time a lot of updates came up. I suggest to use the latest dev version that fix this problem. – Philip Oct 11 '12 at 07:34
When i am using dynamic contant footer is going down it is not at fixed position plz suggest me some way. – Amit Dec 26 '12 at 13:07
1

This answer is obsolete - check the solution below – merrick Mar 13 '13 at 19:43
An updated answer doesn't work for Windows Phone, however it works fine in Android and iOS. – Faizan Mubasher Jan 28 '15 at 07:06

score 62 · Answer 2 · answered Nov 11 '12 at 19:36

62

Since this issue is kind of old a lot of things have changed.

You can now get this behavior by adding this to the footer div

data-position="fixed"

More info here: http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

Also beware, if you use the previously mentioned CSS together with the new JQM solution you will NOT get the appropriate behavior!

answered Nov 11 '12 at 19:36

Nicklas Gnejs Eriksson

3,395
2
21
19

2

This should be marked as the correct answer, using jquerymobile 1.7+ – Sudipta Chatterjee Jan 01 '13 at 10:50
3

The only annoying part about this is that it constantly seems to float over top of your content rather than just going to the bottom when there is not much content to fill the gaps. – jocull Feb 03 '13 at 05:56
@SudiptaChatterjee: "using jquerymobile 1.7+"...quite a soothsayer you are...:P – SASM May 31 '13 at 10:14
*Ahem* - not sure if this was a compliment :) – Sudipta Chatterjee May 31 '13 at 20:23
On windows phone 8.0 JQM/PG projects, there's a ~50px gap, which you can fix with media queries, but still a few pixels where lists 'underflow' behind the footer :-(... – GilesDMiddleton Aug 19 '13 at 17:16

score 15 · Answer 3 · answered Feb 03 '13 at 05:56

15

In my case, I needed to use something like this to keep the footer pinned down at the bottom if there is not much content, but not floating on top of everything constantly like data-position="fixed" seems to do...

.ui-content
{
    margin-bottom:75px; /* Set this to whatever your footer size is... */
}

.ui-footer {
    position: absolute !important;
    bottom: 0;
    width: 100%;
}

answered Feb 03 '13 at 05:56

jocull

20,008
22
105
149

1

Best css-only solution IMHO – Joseph Victor Zammit Feb 24 '13 at 20:20
+1. Otherwise the footer hides part of the page content when there's not enough space. – Mister Smith May 17 '13 at 09:56

score 5 · Answer 4 · answered Apr 15 '15 at 20:41

5

Fixed basics

To enable this behavior on a header or footer, add the data-position="fixed" attribute to a jQuery Mobile header or footer element.

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>

answered Apr 15 '15 at 20:41

Pedro Lobito

94,083
31
258
268

2

This should be the answer – Cesar Bielich Nov 14 '18 at 00:22

score 3 · Answer 5 · answered Jul 28 '11 at 16:40

3

jQm offers:

None of these work?

answered Jul 28 '11 at 16:40

Phill Pafford

83,471
91
263
383

2

Not in the way I would like. Basically the page will only ever extend to the height of the content, so on a desktop machine with a large resolution, the footer will sit halfway up the screen. id like it to be intelligent enough to expand to fill the extra space. – Sergio Jul 29 '11 at 08:41
I thought they fixed that with the beta version, if not you could always use css to fix the page height:100% – Phill Pafford Jul 29 '11 at 13:10

score 2 · Answer 6 · answered Dec 23 '12 at 06:22

The following lines work just fine...

var headerHeight = $( '#header' ).height();
var footerHeight = $( '#footer' ).height();
var footerTop = $( '#footer' ).offset().top;
var height = ( footerTop - ( headerHeight + footerHeight ) );
$( '#content' ).height( height );

score 2 · Answer 7 · answered Feb 05 '14 at 00:19

2

I thought I'd share my CSS only solution here. This way you can avoid the extra overhead of using JS for this.

This isn't a fixed position footer. The footer will be offscreen if the page content is taller than the screen. I think it looks better this way.

The body and .ui-page min-height and height are necessary to prevent the footer from jumping up and down during transitions.

Works with the latest JQM version as of now, 1.4.0

body,
.ui-page {
    min-height:100% !important;
    height:auto !important;
}

.ui-content {
    margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */
}

.ui-footer {
    position:absolute !important;
    width:100%;
    bottom:0;
}

answered Feb 05 '14 at 00:19

ArcadeRenegade

804
9
14

it did not work for me, but jocull's even simpler/reduced CSS solution worked fine: http://stackoverflow.com/a/14669899/1915920 – Andreas Covidiot Sep 30 '14 at 20:34
This work for me (JQM 1.4.5) and jocull's solution also work but it has jumping problem while resizing the browser in my test case. ArcadeRenegade's is smooth! BTW. Don't mix with data-position="fixed" it cause confuse... – ob.yann Dec 03 '15 at 02:55

score 1 · Answer 8 · answered Jul 29 '13 at 11:28

1

Adding the data-position="fixed" and adding the below style in the css will fix the issue z-index: 1;

answered Jul 29 '13 at 11:28

vinod

8,350
9
32
36

David Hedges · Answer 9 · 2011-11-04T22:31:00.303

This script seemed to work for me...

$(function(){
    checkWindowHeight();
    $(document).bind('orientationchange',function(event){
        checkWindowHeight();
    })
});

function checkWindowHeight(){
        $('[data-role=content]').each(function(){
        var containerHeight = parseInt($(this).css('height'));
        var windowHeight = parseInt(window.innerHeight);
        if(containerHeight+118 < windowHeight){
            var newHeight = windowHeight-118;
            $(this).css('min-height', newHeight+'px');
        }
    });
}

score 0 · Answer 10 · answered Jul 28 '11 at 15:43

0

http://ryanfait.com/sticky-footer/

You could possibly use this and use jQuery to update the css height of the elements to make sure it stays in place.

answered Jul 28 '11 at 15:43

Devin

2,146
5
24
36

jQuery Mobile: Stick footer to bottom of page

10 Answers10

Linked