JQuery Mobile內容高度：100％

我正在使用JQuery Mobile開發應用程序。JQuery Mobile內容高度：100％

This是我的html代碼。

我的頁面裏面有一個全屏。我爲我的iframe設置了樣式width:100%; height:100%; border:0%，但它給出的高度高於內容的高度並出現主頁的滾動條。

如何避免此問題？（我要爲我iframe正是height:100%）

來源

2012-07-21 Mahdi Ghiasi

謝謝大家的答案！

最後，我找到了解決方案。我的解決方案有點混亂，但它確定。

這是我的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 ; 
    }

但是，如果使用jQuery Mobile的標題，會有一個額外的空間（幾乎等於頭大小。）此外，它可以與下面的JavaScript來解決：

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

來源

2012-07-22 11:00:40

我猜瀏覽器設置一個小保證金和/或填充在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;}

來源

2012-07-21 22:08:00

對不起，但我不明白你的意思。 – 2012-07-21 22:09:58

檢查編輯。 – 2012-07-21 22:10:13

我將此代碼添加到我的html中，但沒有任何更改。我應該爲他們使用'！important'嗎？ – 2012-07-21 22:12:12

@Mahdi試試這個，

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

希望這會有所幫助。 :)

來源

2012-07-22 00:16:11 hekomobile

JQuery Mobile內容高度：100％

回答

相關問題