別ウインドウのリサイズをiframeにも適用したい
- 別ウインドウのリサイズをiframeにも適用する方法について教えてください
- 別ウインドウのサイズをユーザが変更した場合、中のインラインフレームも同じようにサイズ変更することは可能でしょうか？
- IE8で、別ウインドウのサイズを950x600と950x450の2パターン、インラインフレームの表示サイズを950x550と950x400で設定し、リサイズ時に同じようにサイズ変更する方法を教えてください
- ベストアンサー
別ウインドウのリサイズをiframeにも適用したい
社内Webサイトを作成しています。 メインページから、該当リンクをクリックすると詳細内容を説明している 別ウインドウを開くように設定しています（window.open）。 その別ウインドウ内には、iframeで他ページを表示させています。 別ウインドウのスクロールバーは非表示にしており、 iframeのスクロールバーのみが表示されています。 別ウインドウのサイズをユーザが変更した場合、今の設定では 別ウインドウのみがリサイズされて、中にあるiframeのサイズは変わりません。 リサイズされた場合、中のインラインフレームも 同じようにサイズ変更させたいのですが、このような事は可能なのでしょうか？ 別ウインドウのサイズは950×600と950×450の2パターンあります。 インラインフレームの表示サイズは950×550と950×400です。 (下にcloseボタンを置いているのでその分小さくしています) margin.paddingともに0で設定しています。 環境はIE8です。 このような事ができるのか、できるのであればどのような方法があるのか ご教示頂けないでしょうか。
- 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は大丈夫なんですが・・ 付け加えなきゃいけない何かがあるのでしょうか。
関連するQ&A
- ホームページを作っています、ページ内にiframeで他のページを表示さ
ホームページを作っています、ページ内にiframeで他のページを表示させています。 IEではこのiframeにスクロールバーが出て、縦に長いデータをスクロールして閲覧あせる事が できるのですが、Firefoxだとスクロールバーが出ません・・・ どなたか表示させる方法をご存知でしたら教えてください。 以下HTML記述 <iframe name="iframe4" id="iframe4" frameborder="0" scrolling="yes" src="topix.html" title="※※">※※</iframe> CSS記述 #iframe4{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 420px; height : 490px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; }
- ベストアンサー
- HTML
- iframeの高さを読み込むサイトの高さにしたい。
<iframe src="フレーム.html" width="100%" frameborder="0" ></iframe> と、記述したのですが インラインフレームの高さが小さく「フレーム.html」が全部表示し切れません。 インラインフレームの高さを「フレーム.html」の高さにあわせるにはどうしたらいいでしょうか? アドバイスお願いします。 _____________ | ｜| | ｜| | ｜| |途中で切れる｜| |____________｜| スクロールバー↑ _____________ | | | | | | | | | | ｜ |フレーム.html｜ |が全部表示 ｜ |_____________｜ スクロールバーなし↑
- 締切済み
- HTML
- iframeのスクロールバーをウインドウと一体化
http://xappy.jp/ このサイトは外部サイトを iframe で開いているようです（ユーザー登録が必要なページで申し訳ないです）。 その iframe で開いているページのスクロールバーが、 普通のウインドウのスクロールバーと変わらない位置にあります。 自分の知識では、http://zumirin.cool.ne.jp/kowaza/iframe.htm のように iframe 内にスクロールバーを表示させる方法しか分かりません。 どうすれば同じように、iframe内のスクロールバーとウインドウのスクロールバーを一体化できるのでしょうか？
- ベストアンサー
- HTML
- セルの高さをiframe内のページの高さに合わせて可変にする方法はない
セルの高さをiframe内のページの高さに合わせて可変にする方法はないでしょうか？ テーブルの中にインラインフレームを入れたページを作ろうと思っているのですが、セルの高さを、インラインフレーム内に表示させたページの高さに合わせて可変にする方法はないでしょうか。 セルの高さの指定をしない＋インラインフレームの高さの指定を100％にすれば出来るかな、と思ったのですが、やってみると指定していないのにもかかわらずセルの高さが150pxくらいになり、インラインフレームもそれに合わせた高さになってしまって失敗でした。 インラインフレームの高さを中のページに合わせて可変にして、セルもその高さに合わせる、というような方法があるのであれば、そのやり方でもいいです。 理想は、インラインフレームの中にはリンクによって複数のページを交互に表示させ、またそれらのページはインラインフレームではありますがスクロール無し（つまり親ページのスクロールでインラインフレームごとスクロールさせて下の方まで読むような形）の仕様にしたいです。 しかしインラインフレームの中に表示させるどのページも文章の量や画像のサイズがばらばらでページの長さが異なるので、それぞれの長さに対応出来ればなと思い、このたびの質問に至りました。 図としては ※テーブル幅は指定 ｜￣￣￣￣￣｜←ヘッダー ｜￣￣￣￣￣｜←メニュー ｜￣￣￣￣￣｜ ｜ ｜ ｜ ｜←インラインフレーム ｜ ｜（ここに表示させるページによって高さ可変） ｜ ｜ ｜＿＿＿＿＿｜ ｜＿＿＿＿＿｜←フッター 例： １：インラインフレームに短めのページが入った場合↓ ｜￣￣￣￣￣｜←ヘッダー ｜￣￣￣￣￣｜←メニュー ｜￣￣￣￣￣｜ ｜ ｜←インラインフレーム ｜＿＿＿＿＿｜ ｜＿＿＿＿＿｜←フッター ２：インラインフレームに長めのページが入った場合↓ ｜￣￣￣￣￣｜←ヘッダー ｜￣￣￣￣￣｜←メニュー ｜￣￣￣￣￣｜ ｜ ｜ ｜ ｜←インラインフレーム ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜＿＿＿＿＿｜ ｜＿＿＿＿＿｜←フッター というのが理想です うまい説明ができなくて申し訳ないのですが、もしわかる方がいらっしゃいましたら、ご回答よろしくお願いいたします。
- ベストアンサー
- HTML
- ウインドウのリサイズ
いつもお世話になっております。 Windows9X等でウインドウ（ブラウザ等）の大きさをリサイズする時に マウスでウインドウサイズを変更中に画面の内容を表示せずに サイズ変更ができますが （サイズ変更している、ウインドウの枠のみ） RedHat9 GNOME でも上記操作と同様の事ができるのでしょうか？ またできるのであれば、どのように設定すればよいのでしょうか？ よろしくお願いします。
- ベストアンサー
- その他(OS)
- iframeの横スクロール
iframeを使ってほかのページを表示させているのですが、 どうしても横スクロールバーが出てしまうのでcssのbody要素に 「overflow-x: hidden;」と入れました。 確かにiframeの横スクロールバーは消えましたが、ページの横スクロールも消えてしまいました。 div idでiframeを囲ってcssでその場所だけに「overflow-x: hidden;」を入れると今度は横スクロールバーが消えません。。 色々調べてみたのですが同じような人がいないようで； 詳しい方教えていただけないでしょうか。 （説明がへたくそですみませんm(_ _)m）
- ベストアンサー
- その他([技術者向] コンピューター)
- iframeについて・・・
<iframe>タグを使う時、スクロールバーを縦あるいは横のみ表示させるにはどうしたらよいのでしょう？？？ 横にスクロールはしないので、横のスクロールバーは表示されたくないのに・・・ どなたか教えてください！
- ベストアンサー
- HTML
- iframeについて・・・
幅260pxの枠内に、別ページAに記載した幅230pxのコンテンツを表示させたいのです。 ページAのコンテンツは縦長のリストなので、iframeには縦のスクロールバーのみ表示するようにしているのですが、どうも、読み込み先のページAが幅230pxよりも右側にちょうどスクロールバー1本分程度の余白ができてしまい、パッと見はわからないのですが、iフレーム内でカーソルをドラッグして右にずらすと、その余白がでてきてしまいます。 いったいこの余白は何が原因でできているのでしょうか。 また、消すことはできるのでしょうか？
- ベストアンサー
- HTML
- iframeに横スクロールを出現させない方法（IE６）
いつもお世話になっております。 今回は、IE６でiframeの横スクロールバーを出現させない方法がわからずこちらで質問させていただきました。 TOPページにindex.htmlを置いており、indexにiframeを3つ(top.html/menu.html/main.html)作成し、ページを作っております。 top/mainの2箇所に問題は無く、menuの部分での質問です。 iframeは幅200pxで設定しており、その中に幅指定100%のmanu.htmlをiframe src=""で埋め込んでいます。 menu.htmlには幅200pxで作成した背景画像(no-repeat)と、幅100%指定のiframeを使用しております。 menu.htmlに対しCSSで overflow: auto;を当てていますが、スクロール表示しないといけない状態に画面を変更した場合横スクロールが消えない状態です。（IE７ではきえるのですが…） IE6の特徴の、文章等がある場合親のサイズに合わすことが要因だと思いますが、iframe/menu.htmlのサイズを変更させず横スクロールを表示させないことは可能でしょうか？（menu.htmlを180px固定とか、index.htmlのiframeをscroll="yes"にすれば平気ですが、不恰好になるので…） よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
できました！！！ よかった・・本当に助かりました。 もっと勉強しないといけないですね。 ありがとうございました！