JQuery Mobile content height:100%

css, html, jquery-mobile

Solution

Thank you all guys for answers!

Finally, I have found the solution. My solution is a little messy, but its OK.

This is my css:

    html,body{overflow-y:hidden}
    .frame {
        height: 100% ;
        width: 100% ;
        border: 0  ;
        background-color: green ;
    }

    .content {
        height: 100%;
        width: 100%;
        overflow-y: hidden;
    }

    .ui-content {
        margin: 0   !important ;
        padding: 0   !important ;
        border: 0   !important ;
        outline: 0   !important ;
        height: 100%  ;
        overflow: hidden  ;
    }

But if I use JQuery Mobile header, there will be an extra space (almost equal to header size.) Also It could be solved with the Javascript below :

function correctFrameSize() {
    document.getElementById('content').style.height = (window.innerHeight-40)+"px";
}

Problem

I am developing an application with JQuery Mobile. This is my html code. My page has a full-screen `<iframe>` inside. I have set the style `width:100%; height:100%; border:0%` for my `iframe` but it gives a height more than the content's height and scrollbar of main page appears. How do I avoid this problem? (I want exactly `height:100%` for my `iframe`)

Original source