Stuck Floating Ad Banner at Bottom of screen

Question

I have a quick question that has me stumped. On this page I have a floating banner at the bottom of the screen for a Google Ad. On my desktop, the following code is working correctly:

<div style="left:0;position: fixed;text-align:center;bottom: 0px;width:100%;z-index:9999;">

   <!-- GOOGLE AD CODE -->

</div>

The ad is supposed to float at the bottom of the page and stay there while you scroll. However, when I switch to my iPhone, the banner just stays stuck to the bottom of the screen.

Answer 1

Perhaps add this

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

Answer 2

Try to also give your body or whatever DIV that ad is inside of a relative position as well:

#main-wrap {
  position: relative;
}

<div style="left:0px; position:absolute; text-align:center; bottom: 0px;width:100%; z-index:9999;">.....</div>

In this case, it would look something like this with a Absolute position for the Ad div and relative for your content container. http://pasteboard.co/1gPmvBoK.png

Answer 3

Try this

#footer{
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
#footer{
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}   

from http://www.flashjunior.ch/school/footers/fixed.cfm