JQuery Mobile でアプリケーションを開発しています。
これは私のhtmlコードです。
私のページには全画面表示<iframe>
があります。スタイルwidth:100%; height:100%; border:0%
を設定しましiframe
たが、コンテンツの高さよりも高さが高くなり、メイン ページのスクロールバーが表示されます。
この問題を回避するにはどうすればよいですか? height:100%
(私は私の のために正確に欲しいiframe
)
JQuery Mobile でアプリケーションを開発しています。
これは私のhtmlコードです。
私のページには全画面表示<iframe>
があります。スタイルwidth:100%; height:100%; border:0%
を設定しましiframe
たが、コンテンツの高さよりも高さが高くなり、メイン ページのスクロールバーが表示されます。
この問題を回避するにはどうすればよいですか? height:100%
(私は私の のために正確に欲しいiframe
)
みんなありがとう答えてくれてありがとう!
最後に、私は解決策を見つけました。私の解決策は少し厄介ですが、大丈夫です。
これは私の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";
}
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;}
@Mahdiはこれを試してください、
<iframe id="cnt" width="100%" height="100%" frameborder="0" allowfullscreen>Your browser doesn't support iframes.</iframe>
お役に立てれば。:)