プロが教える店舗＆オフィスのセキュリティ対策術

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

締切済

  • 質問者：hyper_natu
  • 質問日時：
  • 回答数：4件

現在ホームページを制作中で、初めてインラインフレームを使って制作しています。

まず下記のように、インラインフレームのみで試してみたら、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くらいに短くなってしまい、調節もできなくなってしまいました。

それぞれを配置させるのにフロートは必要なので、どうすればよいか分からなくて困っています。

何が原因で、どうすれば上手くいくか分かる方、どうかアドバイスをお願いします。

通報する

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

質問の本文を隠す

A 回答 (4件)

No.4

  • 回答者： salonpath
  • 回答日時：

適切なDOCTYPE宣言を書いて標準準拠モードになると、


htmlの解釈がw3cの仕様に（なるべく）沿った形になる為に
heightの扱い方が変わったんじゃないでしょうか。

#1に書いたように、親の高さを指定しないと（たぶん）%を計算できないので、親に高さを指定してやります。

<style type="text/css">
html,body{
height:100%;
}
<style>

iframeの親全部にheightが必要かもしれないです。

この回答への補足

ご回答を見る前に、解決しました！！

方法は、おっしゃるとうりでした。

いろいろ勉強になりました。　ありがとうございました！！

補足日時：2009/10/05 23:55
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： salonpath
  • 回答日時：

<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/ …

この回答への補足

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

前回の記述に、抜けている部分がありました。

おっしゃるように、教えていただいた記述で確かに上手くいきましたが、下記のようにドキュメント宣言を加えると、上手くいかなくなります・・・；；
何かおかしな記述をしているんでしょうか・・・

<!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>

補足日時：2009/10/05 17:20
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： salonpath
  • 回答日時：

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

この回答への補足

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>

いったいなにがだめなんでしょうか・・・；；

また、「後方互換モード」って何ですか？　それも教えていただけるとうれしいです。

どうか、ご回答をお願いします。

補足日時：2009/10/05 09:28
通報する
    • good
    • 1
    • 件
通報する

No.1

  • 回答者： salonpath
  • 回答日時：

後方互換モードで作ってるんでしょうかね？



親ボックスの高さを指定してみてください。
↓こんな感じ
<div style="float:left;height:100%;">
<iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600"></iframe>
</div>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報