ここから本文です

html5の「iframe」について教えて下さい。 テーブルの中に「iframe」を入れて表...

meg********さん

2018/7/2717:16:31

html5の「iframe」について教えて下さい。

テーブルの中に「iframe」を入れて表示させています。

下の画像ですが、横方向には100%で広がるのですが、
縦方向には何故か100%広がってくれません。
横方向と同様に縦方向も下に100%広がる(伸びる)方法を
教えて下さい。

宜しくお願いします。
--------------------------------------------------------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リンク</title>
<link rel="shortcut icon" href="http://www.△△△.ne.jp/image/favicon.ico" >
<style type="text/css">
html,body,td,iframe { margin:0; padding:0; border:1; }
table { width:100%; height:100%; border-collapse: collapse; }
iframe { width:100%; height:100%; }
</style>
</head>
<body style="overflow: hidden;">
<table>
<tr>
<td style="width:240px;height:230px;">
<iframe name="leftframe1" src="lefttop.html"></iframe>
</td>
<td rowspan="2">
<iframe name="rightframe" src="main.html"></iframe>
</td>
</tr>
<tr>
<td style="width:240px;">
<iframe name="leftframe2" src="left.html"></iframe>
</td>
</tr>
</table>
</body>
</html>

補足画像の矢印方向(下)にホームページ全体を広げたい(伸ばす)のです。
横は100%広がります。縦もホームページ全体が100%広がるようにしたいです。左のメニューと右の表示内容を両方とも、下に100%広げたいのです。宜しくお願いします。

iframe&amp;gt,iframe name,tr&amp;gt,td&amp;gt,title&amp;gt,view-height,vh-230px

この質問は、活躍中のチエリアン・専門家に回答をリクエストしました。

閲覧数:
69
回答数:
3
お礼:
250枚

違反報告

ベストアンサーに選ばれた回答

udo********さん

2018/7/2722:57:28

こんな感じでいかがでしょうか?



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リンク</title>
<link rel="shortcut icon" href="http://www.△△△.ne.jp/image/favicon.ico" >
<style type="text/css">
* { margin: 0px; padding: 0px; }
html,body{ margin:0; padding:0; width:100%; height:100%; border:0; }
table { width:100%; height:100%; border-collapse: collapse; }
td { vertical-align: top; }
iframe { width:100%; height:100%; border: none; }
</style>
</head>
<body style="overflow: hidden;">
<table>
<tr>
<td style="width:240px; height:230px;">
<iframe name="leftframe2" src="lefttop.html"></iframe>
</td>
<td rowspan="2">
<iframe name="rightframe" src="main.html"></iframe>
</td>
</tr>
<tr>
<td>
<iframe name="leftframe2" src="left.html"></iframe>
</td>
</tr>
</table>
</body>
</html>

こんな感じでいかがでしょうか?



&lt;!DOCTYPE html&gt;
 &lt;html...

  • 質問者

    meg********さん

    2018/7/2723:01:19

    ご回答ありがとうございます。
    素晴らしいです。思った通りのレイアウトになりました!

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2018/7/27 23:01:58

皆様、ありがとうございました。

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

ndi********さん

2018/7/2718:10:56

100% 病かも。
100% というのは内容物から見ての 100% であって、画面の 100% を意味しない。
それで CSS3 には view-height という指定をできるようになった。
height: calc(vh-230px);
といった指定ができる。
つまり、見える高さから 230px を減じよという意味になる。
ボーダーがあるから 230 は調整のこと。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

yuk********さん

2018/7/2717:33:25

CSSに

html,body{ width:100%; height:100%; }

この一行を足しても駄目でしょうか??
駄目だったらごめんなさい。。。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる