質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

Q&A

解決済

1回答

9137閲覧

iframeでheight="50%" が効かない

ma2hiro

総合スコア157

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

0グッド

0クリップ

投稿2020/09/08 05:30

お世話になっております。

下記html文書で height="50%" が効かずに困っています。

html

1<!DOCTYPE html> 2<HTML> 3<HEAD> 4 <TITLE> two forums </TITLE> 5</HEAD> 6<BODY> 7 8<iframe name="forum1" width="100%" height="50%" src="http://192.168.5.24/forum1/wforum.pl"></iframe> 9<iframe name="forum2" width="100%" height="50%" src="http://192.168.5.24/forum2/wforum.pl"></iframe> 10 11</BODY> 12</HTML>

こちら解決するにはどのような語句で調査すれば良いのかご助力頂けないでしょうか?
"iframe"でグーグルさんで調査した所
<iframe> - インラインフレーム - とほほのWWW入門

height=n LS/H5/H4T/e3/Ch/Fx/Sa/Op/N6 フレームの高さをピクセルまたはパーセンテージで指定します。

と記載があり問題がなく使えるような表記があるのですが
実際の表示部分には上部100pxぐらいに固定されているのです……

解決するにはどういう語句でグーグルさんで調べれば良いかご助力頂けないでしょうか?

以上お問い合わせいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

たぶん、高さの基準となるbodyに何の指定も無いのでしょう。
そこを含めてCSSで処理しましょう。

CSS

1body { 2 min-height: 100vh; 3 margin: 0; 4} 5iframe { 6 width: 100%; 7 height: 50%; 8}

解決するにはどういう語句でグーグルさんで調べれば良いかご助力頂けないでしょうか?

HTML/CSSの入門書など体系的に学べる教材で勉強されることをお勧めします。


追記:

すみません、上記コードでは実現できないので、下記コードで。

CSS

1html, body { 2 height: 100%; 3} 4body { 5 margin: 0; 6} 7iframe { 8 width: 100%; 9 height: 50%; 10 display: block; 11} 12```**動くサンプル:**[https://jsfiddle.net/mcn16x7v/](https://jsfiddle.net/mcn16x7v/)

投稿2020/09/08 05:37

編集2020/09/08 06:49
kei344

総合スコア69400

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ma2hiro

2020/09/08 06:19

kei344さん コメントありがとうございます。 なるほどです。 bodyに何も指定が無いとは仰る通りですね。 教材に関してもありがとうございます。 https://www.amazon.co.jp/dp/4297103028/ など購入して勉強したいと思います。 ご指摘のように下記のように実装してみたのですが駄目でした。 bodyに何も指定が無い部分から調べてみます。 ありがとうございました。 ``` <!DOCTYPE html> <HTML> <HEAD> <TITLE> two forums </TITLE> <style type="text/css"> <!-- html {overflow-y: hidden; overflow-x: hidden;} body { min-height: 100vh; margin: 0; } iframe { width: 100%; height: 50%; } --> </style> </HEAD> <BODY> <iframe name="forum1" width="100%" height="50%" src="http://192.168.5.24/aquarius/forum/forum1/wforum.pl"></iframe> <iframe name="forum2" width="100%" height="50%" src="http://192.168.5.24/aquarius/forum/forum2/wforum.pl"></iframe> </BODY> </HTML> ```
ma2hiro

2020/09/08 06:46

調べてhtml内のcss下記のようにすると解決出来ました。 ありがとうございました。 ``` <style type="text/css"> <!-- html {overflow-y: hidden; overflow-x: hidden;} body { min-height: 100vh; height: 100vh; margin: 0; } iframe { width: 100%; height: 50%; } --> </style> ```
ma2hiro

2020/09/08 06:49

と思いましたがIEだと駄目でした。サポート切りたいです。 chromeやEdgeだと正常に動作するのですけどね……
ma2hiro

2020/09/08 07:05 編集

追記ありがとうございます!!! そちらでIEでも動作しました。 display: block; が肝ですねっ 勉強して理解します。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問