Question

我正在使用JQuery Mobile开发一个应用程序。

This是我的HTML代码。

我的页面里面有一个全屏<iframe>。我为width:100%; height:100%; border:0%设置了样式iframe，但它的高度超过了内容的高度，并显示了主页的滚动条。

如何避免此问题？（我想要height:100%）{/ 1>完全iframe

Answer 1

谢谢大家的回答！

最后，我找到了解决方案。我的解决方案有点乱，但没关系。

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

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>

希望这会有所帮助。：）

JQuery Mobile内容高度：100％

3 个答案: