Footer on bottom of page but not fixed

Question

How can I move this navbar to the bottom of the page, but not using data-position="fixed". At the moment it will display straight after the last div and not at the bottom. How can I accomplish this ? Because fixed will make it go overlap anything if the content is longer the the viewable part.

         <div data-role="footer">
            <div data-role="navbar" >
                <ul>
                    <li><a href="#order">Order</a></li>
                    <li><a href="#home">Home</a></li>
                </ul>
            </div>
        </div>

Answer 1

No matter what you use in this case if your content height is larger then viewable part of your application it will always overlap with app footer.

So set it back to:

data-position="fixed"

Next part requires limitation to content height. One solution is java script based and ezanker already showed it to you. Other solution is purely CSS based if you prefer more direct approach, find more about it here .

.ui-content {
    padding: 0;
    position: absolute !important;
    top : 40px !important; 
    right : 0;
    bottom : 40px !important; 
    left : 0 !important;    
}

Still this is not enough, if your content is larger you still want it to be scrollable but not affecting footer.

This can be achieved with iScroll plugin and you can read more about it here (with working examples).

Or take a look at my previously related answer here .

Answer 2

I actually wrote a blog on this a couple of weeks ago:

http://jqmtricks.wordpress.com/2014/05/15/content-div-height-fill-page-heightpart-2/

Basically you set the min-height of the content div to make sure it fills the page for short content but then allows the footer to be 'pushed' down for longer content.

The relevant script is

function contentHeight() {
    var screen = $.mobile.getScreenHeight();
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

    var content = screen - header - footer - contentCurrent;
    $(".ui-content").css("min-height", content + "px");
}

$(document).on("pagecontainertransition", contentHeight);
$(window).on("throttledresize orientationchange", contentHeight);

Working DEMO

Answer 3

   html {
      height: 100%;
    }

    body {
      margin: 0;
      padding:0;
      line-height: normal;
      height: 100%;
    }

    .header {
      background:#4a90e2;
      padding: 16px 0 16px 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .main-container {
      min-height: 100%;
      display: grid;
      grid-template-rows: auto 1fr;
      background: #f1f1f1;
    }

    p {
      padding:0 20px;
    }

     .footer {
       background: #4a90e2;
       padding: 11px 25px;
       grid-row-start: 3;
       grid-row-end: 3;
       z-index: 1;
    }

demo link