The best CSS for sticky header bar and footer in Mobile Apps

Posted on 7/18/2016 @ 4:40 PM in #Apple by | Feedback | 2725 views

This took some time to perfect out, so documenting here to save my future donkey.

Sometimes we need an app that looks like this –>

 

HEADER

SCROLLABLEAREA

FOOTER

 

Man you wouldn’t believe how much of a pain in the donkey this is to get right. I mean yeah ionic etc. make it seem so easy, but sometimes you have to do it by hand (like you can’t use ionic for some reason).

Anyway, here is a super simple fix to this problem,

your HTML should look like this,

 

<nav></nav>

<whateverthehellgoeshere/>

<footer></footer>

 

.. and your CSS looks like this -

   1:  html {
   2:    height: 100%;
   3:    width: 100%;
   4:    overflow: hidden;
   5:  }
   6:   
   7:  body {
   8:    height: 100%;
   9:    padding: 0;
  10:    overflow: auto;
  11:    margin: 0;
  12:    -webkit-overflow-scrolling: touch;
  13:  }
  14:   
  15:  nav {
  16:      position: fixed;
  17:      width: 100%;
  18:      top:0px;
  19:  }
  20:   
  21:  footer {
  22:      position:fixed;
  23:      width:100%;
  24:      bottom:0px;
  25:  }


BAM! Nice scrolly viewport you got there fella!

Sound off but keep it civil:

Older comments..