JQuery मोबाइल सामग्री ऊंचाई: 100%

Question

मैं JQuery मोबाइल के साथ एक एप्लिकेशन विकसित कर रहा हूं।

This मेरा एचटीएमएल कोड है।

मेरे पृष्ठ में एक पूर्ण स्क्रीन है। मैंने अपने iframe के लिए शैली width:100%; height:100%; border:0% सेट की है लेकिन यह सामग्री की ऊंचाई से अधिक ऊंचाई प्रदान करती है और मुख्य पृष्ठ की स्क्रॉलबार दिखाई देती है।

मैं इस समस्या से कैसे बचूं? (मैं चाहता हूँ वास्तव में height:100% मेरी iframe के लिए)

Answer 1

उत्तर के लिए सभी लोगों को धन्यवाद!

अंत में, मुझे समाधान मिला है। मेरा समाधान थोड़ा गन्दा है, लेकिन यह ठीक है।

यह मेरा सीएसएस है:

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

लेकिन अगर मैं JQuery मोबाइल हैडर का उपयोग कर, वहाँ एक अतिरिक्त स्थान (लगभग आकार हेडर के बराबर।) इसके अलावा यह नीचे जावास्क्रिप्ट के साथ हल किया जा सकता हो जाएगा:

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

Answer 2

मैं ब्राउज़र body और/या html पर एक छोटे से मार्जिन और/या गद्दी स्थापित कर रही है अनुमान लगा रहा हूँ।

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

भी प्रयास करें क्या आप वाकई स्क्रॉलबार कुछ इस तरह करने से प्रकट नहीं होता कर सकते हैं,:,

html, body {overflow-y: hidden;} 

Answer 3

इस कोशिश @Mahdi

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

उम्मीद है कि यह मदद करता है। :)