回答率: 85.37%

質問するログイン新規登録

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

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

新規登録して質問してみよう

ただいま回答率: 85.37%

トップ HTML5に関する質問

Q&A

解決済

1回答

36590閲覧

iframeのブラウザ全画面表示について

退会済みユーザー

総合スコア0

0グッド

1クリップ

投稿2016/01/20 12:47

0

1

iframeの画面サイズをブラウザいっぱいにしたいのですが
以下のコードを記述しましてもiframeの幅はブラウザいっぱいになるのですが、
高さがかなり短くなってしまいます。
どうすればよいのでしょうか。

<iframe src = "menu1.html" width = "100%" height = "100%"></iframe>

行動規範の内容に同意します

回答1件

0

ベストアンサー

html
1<!DOCTYPE HTML>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5		<title>サンプル</title>
6        <style type="text/css">
7			html, body {
8				height:100%;
9			}
10			#container {
11				height: 100%;
12				padding: 1em;
13			}
14			iframe {
15				width: 100%;
16				height: 100%;
17				border:1px solid #CCC;
18			}
19        </style>
20    </head>
21    <body>
22		<div id="container">
23			<iframe src=""></iframe>
24		</div>
25	</body>
26</html>

投稿2016/01/20 12:57

退会済みユーザー

総合スコア0

2016/01/20 13:15

補足ですが、デフォルトスタイルシートによっては html, body, iframe { margin: 0; padding: 0; } を入れる必要があると思います。特に body は padding or margin に 0 以外を指定しているブラウザがあった記憶が…。

退会済みユーザー

2016/01/20 13:30 編集

margin, padding はあえて0にしませんでした。縦に広がっていることが見た目でわかるように。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.37%

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

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

関連した質問

トップ HTML5に関する質問

iframeのブラウザ全画面表示について

関連した質問

同じタグがついた質問を見る