JQuery Mobile content height:100%

Question

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)

Answer 1

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";
}

Answer 2

I'm guessing the browser is setting a little margin and/or padding on the body and/or html.

Try a classic CSS reset.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

Also, you can make sure the scrollbar doesn't appear by doing something like this:

html, body {overflow-y: hidden;}

Answer 3

@Mahdi try this,

<iframe id="cnt" width="100%" height="100%" frameborder="0" allowfullscreen>Your browser doesn't support iframes.</iframe>

Hope this helps. :)