別ウインドウのリサイズをiframeにも適用したい

解決済

質問者：yukirin56
質問日時：2014/09/09 14:27
回答数：3件

社内Webサイトを作成しています。

メインページから、該当リンクをクリックすると詳細内容を説明している
別ウインドウを開くように設定しています（window.open）。
その別ウインドウ内には、iframeで他ページを表示させています。

別ウインドウのスクロールバーは非表示にしており、
iframeのスクロールバーのみが表示されています。

別ウインドウのサイズをユーザが変更した場合、今の設定では
別ウインドウのみがリサイズされて、中にあるiframeのサイズは変わりません。

リサイズされた場合、中のインラインフレームも
同じようにサイズ変更させたいのですが、このような事は可能なのでしょうか？

別ウインドウのサイズは950×600と950×450の2パターンあります。
インラインフレームの表示サイズは950×550と950×400です。
(下にcloseボタンを置いているのでその分小さくしています)
margin.paddingともに0で設定しています。

環境はIE8です。

このような事ができるのか、できるのであればどのような方法があるのか
ご教示頂けないでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1

回答者： fujillin
回答日時：2014/09/10 11:04

細かなことはわかりませんが、要はリサイズしたときにプロポーションを保ったままにしたいということでしょうか？

iframeのサイズ指定を比率（%など）でしておけば、常に同じプロポーションになるはずですけれど、そういう意味ではないのかな？
もちろん同様のことはスクリプトでも実現可能ですが、やり方や記述がわからないのでご質問なさっているのでしょうから、上記の方法の方がはるかに簡単ですしスクリプトも不要となります。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます！

さっそくiframeのサイズを％に変えたところ
別ウインドウのリサイズにあわせてiframeの大きさも
変化するようになりました！

なのですが、iframeのheightを90%に設定しても
画面の1/4程度の高さでしか表示がされないのです。
widthは大丈夫なんですが・・
付け加えなきゃいけない何かがあるのでしょうか。

通報する

お礼日時：2014/09/11 10:14

No.2

回答者： fujillin
回答日時：2014/09/11 18:07

ANo1です。

％指定の場合、上位要素に対する割合を指定していることになります。

状況のみなのではっきりとはわかりませんが、コンテンツ全体が少ない場合、画面の縦サイズよりもbodyが小さい場合があり、それに対する割合として計算されるためにご質問のようなことが起こる場合があります。

ＣＳＳで
　html, body { height:100%; }
などとしておいても、同じままでしょうか？

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます！

＞　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と古いのですが、そこが問題だったりしますか？

通報する

お礼日時：2014/09/12 09:54

No.3ベストアンサー

回答者： fujillin
回答日時：2014/09/12 12:56

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%として指定する必要があるのでは？