BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み】フルスクリーンiframeの高さが100%になる件

2022-04-01 01:43:09

質問

iframeのheight=100%はすべてのブラウザでサポートされていますか？

doctypeをasにしています。 

<!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" スクロールバーを完全に隠して、iframeの高さを自動的に設定するにはどうしたらよいですか？

解決方法は？

前の回答のようにframesetを使うこともできますが、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のスクロールバーをフル幅で隠します。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します