在移動應用程序的iframe中固定了底部頁腳

Question

我需要在iframe中固定底部頁腳。 在這里，我正在使用全高寬度iframe。 所以現在我在此文件中有一個iframe.html頁面，我在這里使用index.html文件，頁腳固定。 它可以在網絡和Android瀏覽器上正常運行，但不能在iOS Safari瀏覽器上運行。

為此，我使用position: fixed頁腳中的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在移動瀏覽器中的工作方式與台式機相比有些不同。

我建議您通過以下鏈接

第五位置值