5

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

这是我的html代码。

我的页面里面是全屏的<iframe>。width:100%; height:100%; border:0%我已经为我设置了样式，iframe但它给出的高度超过了内容的高度，并且出现了主页的滚动条。

我该如何避免这个问题？（我想要height:100%我的iframe）

4

3 回答 3

3

谢谢大家的解答！

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

这是我的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-22T11:00:40.760 回答
1

我猜浏览器在 and/or 上设置了一点边距和/或body填充html。

尝试经典的 CSS 重置。

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-21T22:08:00.447 回答
1

@Mahdi 试试这个，

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

希望这可以帮助。:)

于 2012-07-22T00:16:11.757 回答