- ベストアンサー
別ウインドウのリサイズをiframeにも適用したい
- 別ウインドウのリサイズをiframeにも適用する方法について教えてください
- 別ウインドウのサイズをユーザが変更した場合、中のインラインフレームも同じようにサイズ変更することは可能でしょうか？
- IE8で、別ウインドウのサイズを950x600と950x450の2パターン、インラインフレームの表示サイズを950x550と950x400で設定し、リサイズ時に同じようにサイズ変更する方法を教えてください
- yukirin56
- お礼率100% (14/14)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ANo.2です。 たまたま手元にあるＩＥが8なのですが… 例えば、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> iframe.test { width:90%; height:90%; } </style> </head> <body> <div>Header</div> <iframe src="hogehoge.html"></iframe> <div>Footer</div> </body> </html> を読み込むと、iframeの高さはご質問文のようにデフォルトの300程度のものとなります。 CSSを html, body { height:100%; } iframe.test { width:90%; height:90%; } とすれば、ウィンドウの90%の高さとなります。 ANo2はまったくの推測で書いていますので、ご質問文からは読み取れない別のところに原因がある可能性も十分にあります。 ・・・と書いて、お礼のところをよく見たら、 『div.inlinef iframe』となっているようですが、ANo2にも書きましたようにサイズの相対指定の基準となるのは親要素のサイズです。 それなので、親要素のDIV（さらにその親があればそちら）を90%になるようにしておいて、IFRAMEは100%として指定する必要があるのでは？
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
ANo1です。 ％指定の場合、上位要素に対する割合を指定していることになります。 状況のみなのではっきりとはわかりませんが、コンテンツ全体が少ない場合、画面の縦サイズよりもbodyが小さい場合があり、それに対する割合として計算されるためにご質問のようなことが起こる場合があります。 ＣＳＳで html, body { height:100%; } などとしておいても、同じままでしょうか？
お礼
回答ありがとうございます！ ＞ html, body { height:100%; } 試したのですが、状況は変わらなかったです。 cssは外部ファイルから読み込んでいるので、そのファイルと あと、htmlのヘッダ部分にも直接書いてみましたが 変わらなかったです。 別ウインドウ（外枠）のサイズ指定はwidth950,height600 を指定しています。 iframe内に表示させるページの高さは別ウインドウの倍は あります。 iframeの大きさはcssで指定しています。 div.inlinef iframe { width: 100%; height:90%; frameborder: 0; margin: 0 0 0 0; padding : 0 0 0 0; } ブラウザがIE8と古いのですが、そこが問題だったりしますか？
- fujillin
- ベストアンサー率61% (1594/2576)
細かなことはわかりませんが、要はリサイズしたときにプロポーションを保ったままにしたいということでしょうか？ iframeのサイズ指定を比率（%など）でしておけば、常に同じプロポーションになるはずですけれど、そういう意味ではないのかな？ もちろん同様のことはスクリプトでも実現可能ですが、やり方や記述がわからないのでご質問なさっているのでしょうから、上記の方法の方がはるかに簡単ですしスクリプトも不要となります。
お礼
回答ありがとうございます！ さっそくiframeのサイズを％に変えたところ 別ウインドウのリサイズにあわせてiframeの大きさも 変化するようになりました！ なのですが、iframeのheightを90%に設定しても 画面の1/4程度の高さでしか表示がされないのです。 widthは大丈夫なんですが・・ 付け加えなきゃいけない何かがあるのでしょうか。
お礼
できました！！！ よかった・・本当に助かりました。 もっと勉強しないといけないですね。 ありがとうございました！