☰

高さ100%のフルスクリーンiframe 質問する

tag-icon • tag-icon javascript html css iframe html-frames
高さ100%のフルスクリーンiframe 質問する

iframe height=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%" />

つまり、残りのページの高さを実際に占めることになりますか (上部に高さ 50 ピクセルの固定の別のフレームがあるため)。これはすべての主要ブラウザ (IE/Firefox/Safari) でサポートされていますか?

また、スクロールバーに関してですが、scrolling="no"Firefox では無効なスクロールバーが表示されます...スクロールバーを完全に非表示にして、iframe の高さを自動的に設定するにはどうすればよいですか?

ベストアンサー1

前の回答にあるようにフレームセットを使用することもできますが、どうしても 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 のスクロール バーが全幅で非表示になります。

おすすめ記事