<table><tr><td></td><td>

<iframe src=”xxx.htm” width=”xxx” height=”100%” frameborder=”0” class=”iframe”></iframe>
</td></tr></table>
以上のような設定で、インラインフレームの高さが画面いっぱいになるようにしたいのですが、うまく行きません。どのように設定すればよろしいでしょうか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/06/20 21:44:52
  • 終了:--

回答(8件)

id:aro No.1

aro回答回数73ベストアンサー獲得回数02005/06/20 22:02:46

ポイント14pt

URLはダミーです


<table>

<table height=”100%”>


これでほぼページの高さ一杯になります。

id:tecra

そのように設定したところ、画面が真っ白になってしまいました。。

2005/06/20 22:37:36
id:GEN111 No.2

GEN111回答回数472ベストアンサー獲得回数582005/06/20 22:03:21

ポイント14pt

http://www.parkcity.ne.jp/~chaichan/src/htmtable.htm

このサイトは移動しました

<table height=”100%”>

のように親要素にも高さを指定してやるとよいでしょう。

id:tecra

一つ前の方と同様で、その方法だと画面が真っ白になってしまい、うまく行きません。

他によい方法はないでしょうか?

(ちなみにcssには特に何も設定していません)

2005/06/20 22:40:09
id:fayn No.3

fayn回答回数22ベストアンサー獲得回数02005/06/20 22:26:22

ポイント14pt

http://www.scollabo.com/banban/rev/rev_10.html

$B%U%l!<%`(B/HTML4.01 $B5U0z$-%j%U%!%l%s%9(B

インラインフレームは、ページのある一部分にフレームを挿入する物なので、画面いっぱいに表示するには不向きです。

画面いっぱいにする場合は、単純にフレーム

を使った方がよいと思います。


また、質問にあるように、テーブルタグの中で、Iframeを100%にしても、それはテーブルタグの範囲の中の100%にしかすぎません。

ブロック要素のような、もうすこし踏み込んだHTML構造を理解されるとなぜ、質問のような100%では、画面いっぱいにならないかがわかると思います。

簡単にいうと、幅や高さで100%にした場合は、親要素にたいして100%ということで、親要素の幅がもともと決まっていたら画面いっぱいにならないということです。

ブロック要素とインライン要素の違いも理解されると応用が利くと思います。


ちょっと前置きが長くなりましたが、インラインフレームの高さが画面いっぱいにするには、

<html>

<head>

<title>フレームページ</title>

</head>

<frameset rows=”100%,0%”>

<frame src=”filename.html”>

</frameset>

</html>


みたいにするとどうでしょうか?

id:tecra

丁寧な回答をありがとうございます。

しかしながら、諸般の事情により通常のフレームが使用できない状況です。

正確に説明しますと、

画面の上50ピクセルをメニューボタンが横に並んでいる形にして、

残りの部分をインラインフレームでいっぱいいっぱいに表示したいと考えています。

しかしながら、メニューボタンにポップアップを設定しているため、

上下で別のフレームを使用するとフレームをまたいで

ポップアップを表示することが出来ません。

このため、インラインフレームを使用するしかない、という状況です。

2005/06/20 23:02:42
id:m-down No.4

m-down回答回数19ベストアンサー獲得回数02005/06/20 22:54:48

ポイント14pt

framesetを使えば出来ますよ

id:tecra

一つ前の方の回答にも書いたのですが、インラインフレームで表示できる方法を探しています。

説明不足で申し訳ありません。

2005/06/20 23:04:23
id:upride No.5

upride回答回数220ベストアンサー獲得回数12005/06/20 23:54:41

ポイント14pt

---- test.htm ---------------


<html>

<body topmargin=”0” leftmargin=”0” marginwidth=”0” marginheight=”0”>

<table height=”100%” border=”0”>

<tr><td>head</td></tr>

<tr><td height=”100%”><iframe src=”xxx.htm” width=”xxx” height=”100%” frameborder=”0” class=”iframe”></iframe></td></tr>

</table></body></html>


--- xxx.htm ---------


<html><body topmargin=”0” leftmargin=”0” marginwidth=”0” marginheight=”0” bgcolor=”999999”>

comment

</body></html>


この2ファイルで試してみてください

id:tecra

ありがとうございます、試してみます。

2005/06/21 10:14:22
id:quaa No.6

quaa回答回数2ベストアンサー獲得回数02005/06/21 07:07:55

ポイント14pt

http://sourcemania.jpn.org/doc/css_height/

sourcemania - CSSのheightを%指定で正しく適用する

ある要素のheightを100%にしたい場合、その要素の親要素も100%にしなければ適用されません。


先のコメントも考慮するとこんな感じでしょうか?


<html>

<head>

<style type=”text/css”>

html, body, table, .main, .iframe {

margin : 0;

padding : 0;

width : 100%;

height : 100%;

}

iframe {

border : none;

}

.menu {

height : 50px;

}

</style>

<title>タイトル</title>

</head>

<body>

<table>

<tr class=”menu”>

<td>メニュー部</td>

</tr>

<tr class=”main”>

<td><iframe src=”xxx.html” class=”iframe”></iframe></td>

</tr>

</table>

</body>

</html>

id:tecra

ありがとうございます、試してみます。

2005/06/23 21:51:57
id:aki73ix No.7

aki73ix回答回数5224ベストアンサー獲得回数272005/06/21 10:13:15

ポイント13pt

インラインフレームを挿入するTABLEのサイズ要素を参考サイトのように 100%にしてみてください


さらに、BODYにもマージン設定すればよいと思います


<HTML>

<BODY TEXT="#ffffff" BGCOLOR="#800080" LEFTMARGIN="0" BOTTOMMARGIN="0" RIGHTMARGIN="0"


TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">

<TABLE width="100%" height="100%" cellpadding="0" border="0" cellspacing="0"><TR>

<tr><td COLSPAN="3" width="100%" height="100%" BGCOLOR="#008000">

<center>

テストテスト</center>

</td><td width="80%" height="100%">

<iframe src="http://nifberry.727.net/test/hatena15.htm" width="300" height="100%"


frameborder="0" class="iframe"></iframe>

</td></tr></table>

</BODY>

</HTML>

id:tecra

ありがとうございます、参考になります。

2005/06/23 21:54:29
id:ito-yu No.8

ito-yu回答回数323ベストアンサー獲得回数142005/06/22 00:07:35

ポイント13pt

URLはダミーです。

以下のソースで、IEとFirefoxで画面いっぱいになることを確認しました。


<html>

<head>

<title>test</title>

<style type=”text/css”><!--

html,body{margin:0;padding:0;}

.table,.iframe{width:100%;height:100%;}

.iframe{margin:0;padding:0;}

--></style>

</head>

<body>

<table class=”table”><tr>

<td><iframe src=”xxx.htm” width=”xxx” height=”100%” frameborder=”0” class=”iframe”></iframe></td>

</tr></table>

</body>

id:tecra

試してみましたが、私の環境(IE)では画面上方に小さく表示されるだけでした。。

2005/06/23 22:00:54
  • id:ito-yu
    あうち…

    書き損じてました…こりゃだめですね

    誤:<iframe src=”xxx.htm” width=”xxx” height=”100%” frameborder=”0” class=”iframe”></iframe>

    正:<iframe src=”xxx.htm” width=”100%” height=”100%” frameborder=”0” class=”iframe”></iframe>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません