Altezza contenuto JQuery Mobile: 100%

Question

Sto sviluppando un'applicazione con JQuery Mobile.

This è il mio codice html.

La mia pagina ha uno schermo intero all'interno. Ho impostato lo stile width:100%; height:100%; border:0% per il mio iframe ma dà un'altezza superiore all'altezza del contenuto e la barra di scorrimento della pagina principale viene visualizzata.

Come evitare questo problema? (Voglio esattamente height:100% per la mia iframe)

Answer 1

Grazie a tutti ragazzi per le risposte!

Infine, ho trovato la soluzione. La mia soluzione è un po 'caotica, ma è OK.

Questo è il mio 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 ; 
    } 

Ma se io uso intestazione jQuery Mobile, ci sarà uno spazio supplementare (quasi uguale a intestazione dimensioni.) Inoltre potrebbe essere risolto con l'Javascript qui sotto:

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

Answer 2

Sto indovinando il browser sta creando un po 'di margine e/o imbottitura sulla body e/o html.

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

Inoltre, è possibile assicurarsi che la barra di scorrimento non appare facendo qualcosa di simile a questo:

html, body {overflow-y: hidden;} 

Answer 3

@Mahdi provare questo,

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

Spero che questo aiuti. :)