修复了移动应用中iframe内的底部页脚

时间:2015-11-03 11:25:23

标签: javascript css html5

我需要在iframe内固定底部页脚。在这里我使用全高度宽度iframe。所以现在我在这个文件中有一个页面iframe.html我在这里使用index.html文件我有固定的页脚。它运行良好的Web和Android浏览器,但它不适用于iOS Safari浏览器。

为此,我在页脚中使用position: fixed属性。

iframe.html文件

<iframe src="index.html" id="iframe"></iframe>

iframe.html css文件

iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    overflow: hidden;
    -webkit-overflow-scrolling:touch;
}

index.html文件

HTML代码

<script>
    for(var i = 0; i < 100; i++)
        document.write("<div> test :: " , i , "</div>");
</script>

<footer>
    <p>footer</p>
</footer>

CSS代码

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padiing: 0.5em;
}

1 个答案:

答案 0 :(得分:0)

问题出在gas上,与桌面相比,移动浏览器的工作方式有所不同。

我建议您浏览以下链接

The fifth position value