IFRAMEJavaScript / jQueryを使用すると、フレーム自体のDOMにアクセスする必要がなく（クロスドメインの問題）、テーブルや絶対位置に依存することなく（フレームの上のコンテンツが動的である場合は役に立たない）、要素の正しいディメンションを正確に設定できます。高さ）：
$(function() {
var aboveHeight = $("#aboveFrame").outerHeight(true);
$(window).resize(function() {
$('#frame').height( $(window).height() - aboveHeight );
}).resize();
});
例： http： //jsfiddle.net/hongaar/jsdYz/
レイアウトにテーブルを使用するのは面倒ですが、垂直方向の寸法を一貫して処理するための最良の方法です。以下は、iframeの端の周りにまだいくつかの白いピクセルを表示し、Firefoxの一部のバージョンでは追加のスクロールバーがありますが、私が達成できた限り近いものです。
<!DOCTYPE html>
<html style="padding:0; margin:0; height:100%">
<body style="padding:0; margin:0; height:100%">
<table style="border:0; padding:0; margin:0; height:100%; width:100%">
<tr style="border:0; padding:0; margin:0">
<td style="border:0; padding:0; margin:0">
<p style="margin:10px"> hello </p>
</td>
</tr>
<tr style="border:0; padding:0; margin:0">
<td style="border:0; padding:0; margin:0; height:100%">
<iframe src="http://www.weather.com" style="border:0; padding:0; margin:0; width:100%; height:100%"></iframe>
</td>
</tr>
</table>
</body>
</html>
テーブル要素を本当に避けたい場合は、、、、およびを使用したdivタグからある程度の牽引力を得ることができますがdisplay:table、特定のブラウザーではさらに厄介な癖に備えることができます。display:table-rowdisplay:table-cell
<!DOCTYPE html>
<html style="height:100%">
<body style="margin:0; >
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:100%"></iframe>
</body>
</html>
これは難しいようですが、これを実現するには<html>OR<body>タグの高さを100％に保つ必要があります
<p>タグの内容が固定されている場合は、の高さを調整してこの方法<p>を試すことができます。またはタグの高さを100％<iframe>に保つ必要があります。そうしないと、機能しません。<html><body>
私は最近これと同じ問題を抱えていました。動的に読み込まれるコンテンツに合わせて高さを拡張したいと考えています。これは夢のように機能します。:)
<!--This script will auto size the height. Must set the id for it to work.-->
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
}
else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
body要素の子であるIframeは、親との高さが100％であり、ページ全体を作成する前にiframe、の高さを宣言してページ全体にする必要がありbodyます。
これを試して。（CSSを外部ファイルまたはそのすぐ内側に配置した方がよいと思いましたhead）
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {height:100%;}
iframe {height:100%;width:100%;}
</style>
</head>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
html, body
{
height: 100%;
margin:0px;
padding:0px;
}
#divHeader
{
height:25px;
}
#divContent
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
height:100%;
width:100%;
margin-top:-25px;
padding-top:25px;
overflow:hidden;
}
iframe
{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="divHeader">
header
</div>
<div id="divContent">
<iframe src="http://www.weather.com"></iframe>
</div>
</body>
</html>
これを試して...
<!DOCTYPE html>
<html>
<head>
<style>
html, body
{
height: 100%;
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<iframe src="http://www.weather.com" onload="this.height = document.body.offsetHeight;"></iframe>
</body>
</html>
ここでデモを確認できます
できません。以前にこれを試しましたが、iframeの問題であり、標準に従って内部のhtmlドキュメントの高さを公開する方法が見つかるまでこのままになります。内部ドキュメントのDOCTYPEを削除すると、ある程度アクセスできるようになると思います。コンテナの残りの高さの100％に合うようにIframeを作成します
私はいつもheight：100vhを使用しました。ビューポートを100％提供します