css - Can't keep footer down on mobile -

i'm having problems keeping footer @ bottom of page when viewing on mobile. looks -

i followed this site (code below) on how keep footer down, worked on desktop not on mobile -

 html,  body { margin:0; padding:0; height:100%;  }  #wrapper { min-height:100%; position:relative;  }  #header { background:#ededed; padding:10px; } #content { padding-bottom: 100px; padding-left: 100px; padding-right: 100px; padding-top: 50px; } #footer { width:100%; height:100px; position:absolute; bottom:0; left:0;  } 

here jsfiddle.

what doing wrong?

try following keep footer @ bottom of page.

html {    position: relative;    min-height: 100%;  }  body {    /* use margin-bottom footer height */    margin: 0 0 100px 0;  }  .footer {    position: absolute;    bottom: 0;    width: 100%;    /* set footer height corresponding body margin-bottom */    height: 100px;    background-color: #f5f5f5;  }

<div class="footer">      footer  </div>