卡在屏幕底部的浮动广告横幅答案

【问题标题】：Stuck Floating Ad Banner at Bottom of screen卡在屏幕底部的浮动广告横幅
【发布时间】：2015-09-01 16:23:43
【问题描述】：

我有一个简单的问题让我很困惑。在this page 上，我在屏幕底部有一个Google 广告的浮动横幅。在我的桌面上，以下代码运行正常：

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

   <!-- GOOGLE AD CODE -->

</div>

广告应该漂浮在页面底部并在您滚动时停留在那里。但是，当我切换到我的 iPhone 时，横幅只是停留在屏幕底部。

【问题讨论】：

位置：固定；使横幅无限期地固定在您的屏幕上。除非您通过媒体查询为 iPhone 指定不同的方式，否则它将执行相同的操作，始终停留在窗口上，与桌面查看的位置相同。

标签： javascript html css adsense

【解决方案1】：

试试这个

#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');
}

来自http://www.flashjunior.ch/school/footers/fixed.cfm

【讨论】：

【解决方案2】：

尝试也给你的身体或广告在相对位置内的任何 DIV：

#main-wrap {
  position: relative;
}

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

在这种情况下，它看起来像这样，广告 div 的绝对位置和内容容器的相对位置。 http://pasteboard.co/1gPmvBoK.png

【讨论】：

【解决方案3】：

也许添加这个

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

【讨论】：