CODEWITHSUNDEEP
androidhtmlcss
Kris
Kris

Reputation: 179

Sticky Footer Issue (Android, Apple IOS)

I have a sticky footer that I have appearing at the bottom of my page. I have this unique over-lay navigation that sits over-top of all the content on toggle at max height of the given device. On Android and Apple devices the navigation isn't overlaying the footer as it does it on any other device.

See a live example here:

Website

CSS

* {
  margin: 0;
  padding: 0;
}
html {
  position: relative;
  min-height: 100%;
}
body {
  height: 100%;
}
.mobilenav {
  font-family: A, sans-serif;
  top: 0px;
  left: 0px;
  z-index: 999;
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.9);
}
.foot {
  z-index: 998;
  display: block;
  position: absolute;
  width: 100%;
  height: 40px;
  bottom: 0px;
  left: 0px;
  background: none repeat scroll 0% 0% #515252;
  border-bottom: 2px solid #D8703A;
}

*Update 1: After a little bit of testing it seems that it does work but only when the page is < a certain height without too much scroll. When the page is > than a certain height the .mobilenav doesn't take account the additional height and thus the footer isn't included into the height equation.

Upvotes: 2

Views: 832

Answers (1)

ZEE
ZEE

Reputation: 5849

remove the absolute position from you footer and it will work preperly : 

    .foot {
  z-index: 998;
  display: block;
  position: absolute; // <-- remove this 
  width: 100%;
  height: 40px;
  bottom: 0px;
  left: 0px;
  background: none repeat scroll 0% 0% #515252;
  border-bottom: 2px solid #D8703A;
}

Upvotes: 1

Related Questions