Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How do I make a sticky footer with jquerymobile?

How do I make a sticky footer with jquerymobile?

Problem

I want my Footer to always be stick to the bottom of the screen, except in the case when there is enough page content to fill the screen In this case, the content should take priority and push the footer off the bottom (so that you have to scroll to see it).

Here is an example of desired behavior: http://ryanfait.com/sticky-footer/

To be clear, I know about fixed toolbars in JQM, they are not what I want because they take up valuable screen space when there is a lot of content.

Problem courtesy of: Matt Burns

Solution

The closest I have come is the following CSS rule:

[data-role=footer] {
    bottom: 0;
    position: absolute;
    width: 100%;
}

If you know a better way, please post an answer!

Solution courtesy of: matt burns

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How do I make a sticky footer with jquerymobile?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×