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

bodyブラウザが and / or に少しのマージンやパディングを設定していると思います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 に答える