在移动应用程序的iframe中固定了底部页脚

Question

I need fixed bottom footer inside iframe. here i am using full height width iframe. So Right now i have a page iframe.html inside this file i am using index.html file here i have fixed footer. It working fine web and android browser but it is not working iOS safari browser.

For this i am using position: fixed property in footer.

iframe.html file

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

iframe.html css file

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

index.html file

HTML code

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

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

CSS Code

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

Answer 1

The problem is with the position:fixed which works somewhat differently in mobile browsers as compared to desktop.

I will suggest you to go through the following link

The fifth position value