締切済み

インラインフレームの縦幅を、ブラウザ・画面・解像度に合わせて、自動的に調節させたいけど、IEとOperaで上手くいきません；；

2009/10/04 23:16

現在ホームページを制作中で、初めてインラインフレームを使って制作しています。まず下記のように、インラインフレームのみで試してみたら、IE７・Opera・FireFox・GoogleChromeで上手く自動的に調節できました。 <html> <head> </head> <body> <div> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> 次に、インラインフレームの周りに、下記のように画像やリンクバナーなどを配置させました。 <html> <head> </head> <body> <div><img src="" width="50" height="600"></div> <div><img src="" width="150" height="600"></div> <div> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> これも予定通り、IE７・Opera・FireFox・GoogleChromeで上手く自動的に調節できました。次に、下記のようにそれぞれをフロートさせて配置させてみました。 <html> <head> </head> <body> <div style="float:left;"><img src="" width="50" height="600"></div> <div style="float:left;"><img src="" width="150" height="600"></div> <div style="float:left;"> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> すると、FireFox・GoogleChromeでは上手くいったのですが、IE7・Operaでインラインフレームの縦幅が100pxくらいに短くなってしまい、調節もできなくなってしまいました。それぞれを配置させるのにフロートは必要なので、どうすればよいか分からなくて困っています。何が原因で、どうすれば上手くいくか分かる方、どうかアドバイスをお願いします。

hyper_natu
お礼率41% (5/12)

HTML
回答数4
ありがとう数0

みんなの回答 （4）
専門家の回答

みんなの回答

salonpath
ベストアンサー率48% (194/399)

2009/10/05 18:28 回答No.4

適切なDOCTYPE宣言を書いて標準準拠モードになると、 htmlの解釈がw3cの仕様に（なるべく）沿った形になる為に heightの扱い方が変わったんじゃないでしょうか。 #1に書いたように、親の高さを指定しないと（たぶん）%を計算できないので、親に高さを指定してやります。 <style type="text/css"> html,body{ height:100%; } <style> iframeの親全部にheightが必要かもしれないです。

質問者

補足 2009/10/05 23:55

ご回答を見る前に、解決しました！！方法は、おっしゃるとうりでした。いろいろ勉強になりました。　ありがとうございました！！

salonpath
ベストアンサー率48% (194/399)

2009/10/05 10:19 回答No.3

<html> <head> </head> <body> <div style="float:left;"><img src="" width="50" height="600"></div> <div style="float:left;"><img src="" width="150" height="600"></div> <div style="float:left; height:100%;"> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> #2の補足に書かれている、ダメだったというソースをそのままコピペして確認してみましたが（frame_test.html は http://www.google.co.jp/に変更） ie6-8 firefox3.5 opera10でiframeの高さは80%になりました。何がダメなんでしょうね。後方互換モードというのは、正しくないhtmlの解釈でhtmlを表示する状態です。「doctype宣言」で検索してみると詳しい説明のページがたくさんでてくるのでみてみてくださいたとえばこんな感じ http://allabout.co.jp/internet/hpcreate/closeup/CU20070115B/

質問者

補足 2009/10/05 17:20

ご回答ありがとうございます。前回の記述に、抜けている部分がありました。おっしゃるように、教えていただいた記述で確かに上手くいきましたが、下記のようにドキュメント宣言を加えると、上手くいかなくなります・・・；；何かおかしな記述をしているんでしょうか・・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <div style="float:left;"><img src="" width="50" height="600"></div> <div style="float:left;"><img src="" width="150" height="600"></div> <div style="float:left; height:100%;"> <iframe src="frame_information.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html>

salonpath
ベストアンサー率48% (194/399)

2009/10/05 08:35 回答No.2

あぁ、iframeのheight書き忘れました、80%の指定を追加して試してみてください。

質問者

補足 2009/10/05 09:28

salonpathさん、ご回答ありがとうございます。早速、下記のように修正してみましたが、変わらずIE7・Opera加えて、IE６でもだめでした；； <html> <head> </head> <body> <div style="float:left;"><img src="" width="50" height="600"></div> <div style="float:left;"><img src="" width="150" height="600"></div> <div style="float:left; height:100%;"> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> いったいなにがだめなんでしょうか・・・；；また、「後方互換モード」って何ですか？　それも教えていただけるとうれしいです。どうか、ご回答をお願いします。

salonpath
ベストアンサー率48% (194/399)

2009/10/05 08:31 回答No.1

後方互換モードで作ってるんでしょうかね？親ボックスの高さを指定してみてください。 ↓こんな感じ <div style="float:left;height:100%;"> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600"></iframe> </div>