JQuery Altura de contenido móvil: 100%

Question

Estoy desarrollando una aplicación con JQuery Mobile.

This es mi código html.

Mi página tiene una pantalla completa adentro. Establecí el estilo width:100%; height:100%; border:0% para mi iframe pero da una altura más alta que la altura del contenido y aparece la barra de desplazamiento de la página principal.

¿Cómo puedo evitar este problema? (Quiero exactamente height:100% para mi iframe)

Answer 1

¡Gracias a todos ustedes por las respuestas!

Finalmente, he encontrado la solución. Mi solución es un poco desordenada, pero está bien.

Esta es mi 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 ; 
    } 

Pero si uso cabecera jQuery Mobile, habrá un espacio extra (casi igual a la cabecera de tamaño.) También podría ser resuelto con la Javascript a continuación:

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

Answer 2

supongo que el navegador se está poniendo un poco de margen y/o material de relleno en el body y/o html.

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

Además, puede asegurarse de que la barra de desplazamiento no aparece al hacer algo como esto:

html, body {overflow-y: hidden;} 

Answer 3

@Mahdi probar esto,

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

Espero que esto ayude. :)