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

User · Answer

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

User · Answer

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  lt  windowHeight               var newHeight   windowHeight-118                this  css  min-height   newHeight  px

User · Answer

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

User · Answer

jQm offers    http   jquerymobile com demos 1 0b1   demos 1 0b1 docs toolbars docs-footers html http   jquerymobile com demos 1 0b1   demos 1 0b1 docs toolbars bars-fixed html http   jquerymobile com demos 1 0b1   demos 1 0b1 docs toolbars bars-fullscreen html http   jquerymobile com demos 1 0b1   demos 1 0b1 docs toolbars footer-persist-a html   None of these work

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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     lt div data-role  footer  data-position  fixed  gt       lt h1 gt Fixed Footer  lt  h1 gt   lt  div gt

User · Answer

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

User · Answer

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

[css] jQuery Mobile: Stick footer to bottom of page

Examples related to css

Examples related to jquery-mobile