警告
廃止され、サポート対象外となった Internet Explorer 11 デスクトップ アプリケーションは、特定のバージョンの Windows 10 で Microsoft Edge の更新プログラムを通じて完全に無効になります。 詳細については、「Internet Explorer 11 デスクトップ アプリの廃止に関する FAQ」をご覧ください。
この記事では、Scroll height プロパティを呼び出して Web ページの高さを設定する例を示します。
元の製品バージョン: Internet Explorer 9 以降のバージョン
元の KB 番号: 2684777
症状
iframe の scrollHeight プロパティは、予想よりも小さい値を返す場合があります。 この値を使用して iframe の高さのサイズを変更すると、垂直スクロール バーが表示され、コンテンツが高くなる可能性があります。
原因
Microsoft は、 scrollHeight プロパティの計算に問題があることを確認しました。
回避策
高さを高くするために、追加の余白を加えます。 これにより、表示されるスクロール バーが不要な場合のほとんどの状況が解決されます。 または、Internet Explorer 9 の標準ドキュメント モードに切り替えます。このモードでは問題が発生しないためです。
詳細
この問題が発生するために必要なすべての条件が正確にわかっていません。 状況によっては、問題は 100% 以外の他のズーム レベルでのみ表示されます。
iframe の 要素と 要素で、padding、margin、および border がすべて 0px であっても、html が body として使用するのに十分な大きさではない例を次に示します。 iframe がコンテンツより大きい場合、scrollHeight が 491 を返しますが、491 ではスクロール バーの表示を防ぐのに十分ではありません。 この特定の例は、Internet Explorer 8 標準モードでのみ再現されます。 その他の例は、Internet Explorer 9 以降のバージョンの標準モードおよび/または風変わりモードで再現できます。
- test.htm
<!doctype>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
</head>
<body>
<button onclick="Test()">Set iframe's pixelHeight to scrollHeight</button><br/>
<div id="myDiv" style="position: absolute; left: 200px; border: 2px solid black; height: 50px; width: 300px"></div>
<iframe style="width: 182px; height: 491px; border: 1px solid green;" id=myiframe src="iframe.htm" frameBorder=0></iframe>
<script language="javascript">
function Test()
{
var obj = document.getElementById("myiframe");
obj.style.pixelHeight = obj.contentWindow.document.body.scrollHeight;
var result = obj.contentWindow.document.body.scrollHeight;
document.getElementById("myDiv").innerHTML = "iframe scrollHeight = " + result + "<br/>";
}
</script>
</body>
</html>
- iframe.htm
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<style>
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 70%;
padding: 0px; margin: 0px; border: 0px;
}
html { padding: 0px; margin: 0px; border: 0px; }
</style>
</head>
<body>
<div>
<table>
<tbody>
<tr>
<td>
<p>1st row in p tags</p>
</td>
</tr>
<tr>
<td>2nd row</td>
</tr>
<tr>
<td>
3rd row of text
<div>
<hr>
Text below the hr that wraps to next line<br>
This line of text is lone enough to go to four lines and at seventy five percent zoom will cause the problem<br>
<hr>
abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
iframe の高さが onresize イベント ハンドラーのこのプロパティに基づいて設定されている場合は、スクロール バーのない高さとスクロール バーを持つ高さの間で iframe の高さを切り替える可能性があるため、onresize 呼び出しの無限ストリームを回避するように注意する必要があります。 パディングを追加するか、フラグを使用すると、無限再帰を防ぐことができます。