javascript - 修复了移动应用程序 iframe 内的底部页脚

Question

我需要在 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;
}

Answer 1

问题出在 position:fixed 上，与桌面浏览器相比，它在移动浏览器中的工作方式有些不同。

我建议您访问以下链接

The fifth position value