Sticky-Footer for jQueryMobile

Question

The best way to describe what I'm looking for is the thread below.

Make div stay at bottom of page's content all the time even when there are scrollbars

The difference is I want a footer like stackoverflow at the bottom but using the jQueryMobile framework. Is this possible?

I've tried the techniques in the other thread successfully for sites not using the framework, but I think the framework forces divs into absolute position and it gets really messy and I'm not sure the best way to do this?

Any help is appreciated.

Answer 1

I found the answer to my question.

[data-role=page] {
  min-height: 100%;
  position: relative;
}
[data-role=content] {
  margin-bottom: 80px; /* based on how tall your footer is and how much gap you want */
}
[data-role=footer] {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px /* this can be configurable, or omitted, as long as the above padding-bottom is at least as much as the height of the footer is */
  padding-bottom:60px;
}

I did a variation of the answer I found by Nick here: Jquery Mobile Sticky Footer

What I changed was to use margin instead of padding so that the content didn't increase in size when there was no need for it to.