Wysokość zawartości JQuery Mobile: 100%

Question

Zajmuję się tworzeniem aplikacji z JQuery Mobile.

This to mój kod html.

Moja strona zawiera pełny ekran . Ustawiłem styl width:100%; height:100%; border:0% dla mojego iframe, ale daje on wysokość większą niż wysokość zawartości i pojawia się pasek przewijania strony głównej.

Jak mogę uniknąć tego problemu? (Chcę dokładnie height:100% dla mojego iframe)

Answer 1

Dziękuję wszystkim za odpowiedzi!

Wreszcie znalazłem rozwiązanie. Moje rozwiązanie jest trochę niechlujne, ale jest w porządku.

To jest mój 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 ; 
    } 

Ale jeśli mogę użyć nagłówka JQuery komórkowy, nie będzie dodatkową przestrzeń (prawie równą header rozmiar). Także To może być rozwiązany z poniższej javascript:

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

Answer 2

Zgaduję przeglądarka jest ustawienie trochę margines i/lub wyściółkę na body i/lub html.

Spróbuj 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: "" ""; 
} 

Ponadto, można upewnić się, że nie pojawi się pasek przewijania wykonując coś takiego:

html, body {overflow-y: hidden;} 

Answer 3

@Mahdi spróbować tego,

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

Mam nadzieję, że to pomoże. :)