ここから本文です

html5について教えて下さい。 下記図の様に下方向に全体を広げる(伸ばす)方法を...

meganeさん

2018/7/2821:49:36

html5について教えて下さい。
下記図の様に下方向に全体を広げる(伸ばす)方法を教えて下さい。
超超超初心者です。
宜しくお願いします。

--------------------------------------------------------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="http://www.△△△.ne.jp/image/favicon.ico" >
<title>HTML5 3分割でインラインフレームの読み込み</title>
<style>
body {
margin : 0;
padding : 0;
}
.container {
position : relative;
padding : 0;
width : 100%;
height : 602px;
border: solid 1px #00f;
}
iframe {
position : absolute;
padding: 0;
margin: 0;
border : solid 1px #00f;
}
iframe:nth-child(1){/* leftframe1 */
left : 0;
top : 0;
width: 200px; /* 固定 */
height: 200px; /* 固定 */
}
iframe:nth-child(2){/* leftframe2 */
left : 0;
bottom : 0;
width: 200px; /* 固定 */
height: calc(100% - 200px);
border-top: none;
}
iframe:nth-child(3){/* rightframe */
left : 200px;
top : 0;
width: calc(100% - 200px);
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<iframe src="leftframe1.html" scrolling="no" name="leftframe1">
未対応ブラウザです</iframe>
<iframe src="leftframe2.html" scrolling="no" name="leftframe2">
未対応ブラウザです</iframe>
<iframe src="rightframe.html" scrolling="no" name="rightframe">
未対応ブラウザです</iframe>
</div>
</body>
</html>

補足Internet Explorer と Google Chrome のブラウザでは下方向には広がり(伸び)ませんでした。横方向には広がり(伸び)ました。

iframe&amp;gt,iframe src,no&amp;quot,nth-child,style&amp;gt,height,container

閲覧数:
48
回答数:
3
お礼:
500枚

違反報告

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

プロフィール画像

カテゴリマスター

2018/7/2822:40:05

前回のご質問の
私めの回答の最後に
書いてあるので、
そこを参考にされたらいかがでしょう。

  • 質問者

    meganeさん

    2018/7/2903:31:15

    2つの質問に答えて頂きありがとうございます。

    他者さまからの回答を交えながら、私なりに考えてみました。
    それが下記になります。

    <style>
    html,body {  ← ここに「html,」を追記
    height: 100%; ←「height: 100%;」を追記
    margin : 0;
    padding : 0;
    }
    .container {
    position : relative;
    padding : 0;
    width : 100%;
    height : 602px; ←「602px;」を「height: 100%;」に変更
    border: solid 1px #00f;
    }


    上記3か所を変更する事によって、下方向に広がり(伸び)ました。
    Internet Explorer と Google Chrome のブラウザでも確認出来ました。これが正しいのかは正直、私には分かりません。

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

  • その他の返信(2件)を表示

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

  • 取り消す
  • キャンセル

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

2018/7/29 04:51:03

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

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

1〜2件/2件中

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

hog********さん

2018/7/2900:47:53

html, body{
height: 100%;
}
#container{
height: 100%;
}
でどうでしょう。

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

  • 取り消す
  • キャンセル

プロフィール画像

カテゴリマスター

yoy********さん

2018/7/2822:14:05

html, body {
height: 100%;
}

これを最初(1行目辺り)のところに追加してください。

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

  • 取り消す
  • キャンセル

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

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

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

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

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

閉じる

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

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

閉じる