iframe の高さ = 100% はすべてのブラウザーでサポートされていますか?
私はdoctypeを次のように使用しています:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
私の iframe コードでは、次のように言います。
<iframe src="xyz.pdf" width="100%" height="100%" />
つまり、実際には残りのページの高さになります (上部に 50px の固定高さの別のフレームがあるため) これはすべての主要なブラウザー (IE/Firefox/Safari) でサポートされていますか?
また、スクロールバーについてですがscrolling="no"、Firefox では無効なスクロールバーが表示されます...スクロールバーを完全に非表示にし、iframe の高さを自動的に設定するにはどうすればよいですか?
前の回答の状態のようにフレームセットを使用できますが、iFrame の使用に固執する場合は、次の 2 つの例が機能するはずです。
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
別の方法:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
上記の 2 つの方法でスクロールを非表示にするには:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
2 番目の例でハックします。
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
iFrame のスクロール バーを非表示にするために、親はoverflow: hiddenスクロール バーを非表示にするように作成され、iFrame は最大 150% の幅と高さになるように作成されます。これにより、ページの外側にスクロール バーが強制的に表示されます。本体にはスクロール バーがないためです。 iframe がページの境界を超えているとは思わないかもしれません。これにより、iFrame のスクロールバーが全幅で非表示になります。
私は同じ問題に遭遇しました.iframeをdivに引っ張っていました。これを試して：
<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
高さは、ビューポートの高さを表す 100vh に設定されます。また、幅を 100vw に設定することもできますが、ソース ファイルがレスポンシブである場合は問題が発生する可能性があります (フレームが非常に広くなります)。
1. DOCTYPE をより厳密でないものに変更します。XHTML を使用しないでください。ばかげている。HTML 5 doctype を使用するだけで問題ありません。
<!doctype html>
2. iframe の親に高さがあることを確認する必要がある場合があります (ブラウザーによって異なります)。そしてその親。そしてその親。等：
html, body { height: 100%; }
これは私にとって非常にうまく機能しました（iframeコンテンツが同じドメインからのものである場合のみ）：
<script type="text/javascript">
function calcHeight(iframeElement){
var the_height= iframeElement.contentWindow.document.body.scrollHeight;
iframeElement.height= the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
Akshit Sootaの回答に加えて、各親要素の高さ、およびテーブルと列の高さを明示的に設定することは重要です。
<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">
<table style="width: 100%; height: 100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="left" height="100%">
<iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;"
width="100%" height="100%" frameborder="0" scrolling="no"
src="http://www.youraddress.com" ></iframe>
</td>
最初にcssを追加します
html,body{
height:100%;
}
これはhtmlになります：
<div style="position:relative;height:100%;max-width:500px;margin:auto">
<iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
これは素晴らしいリソースであり、私は数回使用しましたが、非常にうまく機能しています。次のコードを作成します....
<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
ここに簡潔なコードがあります。現在のウィンドウの高さを見つけるためにjqueryメソッドに依存しています。iFrame の読み込み時に、iframe の高さを現在のウィンドウと同じに設定します。次に、ページのサイズ変更を処理するために、body タグには、ドキュメントのサイズが変更されるたびに iframe の高さを設定する onresize イベント ハンドラーがあります。
<html>
<head>
<title>my I frame is as tall as your page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
<iframe id="iframe1" src="yourpage.html" style="width:100%;" onload="this.height=$(window).height();"></iframe>
</body>
</html>
ここに実際のサンプルがあります: http://jsbin.com/soqeq/1/
iframe：viewportページの読み込み時に埋め込みビデオが領域全体を占める動画や埋め込みコンテンツを含むランディング ページに最適なアプローチです。ページを下にスクロールすると表示される、埋め込みビデオの下に追加のコンテンツを含めることができます。
CSS と HTML コード。
body {
margin: 0;
background-color: #E1E1E1;
}
header {
width: 100%;
height: 56vw;
max-height: 100vh;
}
.embwrap {
width: 100%;
height: 100%;
display: table;
}
.embwrap .embcell {
width: auto;
background-color: black;
display: table-cell;
vertical-align: top;
}
.embwrap .embcell .ifrwrap {
height: 100%;
width: 100%;
display: inline-table;
background-color: black;
}
.embwrap .embcell .ifrwrap iframe {
height: 100%;
width: 100%;
}<header>
<div class="embwrap">
<div class="embcell">
<div class="ifrwrap">
<iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&modestbranding=1&iv_load_policy=3&showsearch=0&rel=1&controls=1&showinfo=1&fs=1"></iframe>
</div>
</div>
</div>
</header>
<article>
<div style="margin:30px; text-align: justify;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
<p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
</div>
</article>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframeに従って、パーセンテージ値は許可されなくなりました。しかし、以下は私のために働いた
<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>
width:100%動作しますが、動作しませheight:100%ん。なのでwindow.innerHeight使用済みです。高さには CSS ピクセルを使用することもできます。