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>

score 1 · Answer 1 · edited May 23 '17 at 12:05

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.

score 0 · Answer 2 · answered Jun 01 '14 at 14:05

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

it does work, but since there is a navbar inside the footer, the footer size has only a value of 2, not like 35 that it roughly should be. Any thoughs how to fix this? EDIT: at the moment the footer is just below the content and need to be scrolled to see. — user2803086, Jun 01 '14 at 17:31
If you don't want the footer pushed down for longer content, see the original article: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/. For the footer height issue, please edit and update my demo fiddle to reproduce the isuue. — ezanker, Jun 02 '14 at 14:02

Hiren Gabu · Answer 3 · 2020-02-26T10:38:45.610

   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

Footer on bottom of page but not fixed

3 Answers3