Why is this iframe height stuck at 150 px?

Question

Here is the entire file. I thought it might be a reset issue so I set height to 100% for both the body and the iframe. View here - www.arcmarks.com/video. Please do not repost.

I want it to take up the entire page.

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>

    <style>
        .if {
            width: 100%;
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
        }
    </style>

    <iframe class="if" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin allow-modals"
            frameborder="0" src="//fiddle.jshell.net/kizu/zfUyN/show/"></iframe>

</body>
</html>

It looks like that iframe called another iframe ... – cade galt Dec 05 '15 at 16:02 — cade galt, Dec 05 '15 at 16:02
html 100% works, please stop submitting answers. – cade galt Dec 05 '15 at 16:05 — cade galt, Dec 05 '15 at 16:05

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-05T16:15:26.950

2

The body and html are of full width only. It is by jsfiddle.net, your view is limited to a height of 148px. Please check below:

Solution

Since you cannot control jsfiddle.net, having html, body {height: 100%;} also might work. Please try checking with the API to get the full width. There's an option to share full screen embed. Please try that.

edited Dec 05 '15 at 16:15

answered Dec 05 '15 at 16:02

Praveen Kumar Purushothaman

164,888
24
203
252

can you please remove the part of the image that has my domain on it. – cade galt Dec 05 '15 at 16:04
@cadegalt Yes I can, but you already have given out in the question, isn't it? **Deleted the part** – Praveen Kumar Purushothaman Dec 05 '15 at 16:05
@cadegalt **I have removed after you said.** Can't you see? But the domain is still there in your question. Have a look. – Praveen Kumar Purushothaman Dec 05 '15 at 16:07

score 1 · Answer 2 · edited May 23 '17 at 11:50

1

You need to add html { height: 100%; } to your CSS.

DEMO

Here's the explanation:

Working with the CSS height property and percentage values

edited May 23 '17 at 11:50

Community

1
1

answered Dec 05 '15 at 16:02

Michael Benjamin

346,931
104
581
701

Kindly check my answer. Do you agree with mine? The height is not limited by the HTML. The OP has given right code, but the problem lies within the other domain. – Praveen Kumar Purushothaman Dec 05 '15 at 16:11
1

@PraveenKumar Yes, I see your answer. But the OP has stated in question comments and your answer comments that *html 100%* works. So what am I missing? – Michael Benjamin Dec 05 '15 at 16:13

score 0 · Answer 3 · answered Dec 05 '15 at 16:04

0

See this fiddle

For the iframe to take 100% height, you need to set the height of html along with body to 100%.

Thus the updated CSS would be as below

CSS

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

As a note, you have to mention the <style> inside the <head> tag and not inside the <body> tag.

answered Dec 05 '15 at 16:04

Lal

14,726
4
45
70

Removed the downvote. Your's doesn't answer the question. No use putting that CSS. It is limited by jsfiddle in the demo. Have a look please. – Praveen Kumar Purushothaman Dec 05 '15 at 16:09
Please kindly have a look at my answer, as this doesn't work. Already the OP's code has the full height DOM. – Praveen Kumar Purushothaman Dec 05 '15 at 16:12
1

Saw your answer..but, the OP himself has mentioned in his comments that giving `100%` to `html` worked @PraveenKumar – Lal Dec 05 '15 at 16:14

score 0 · Answer 4 · edited Dec 05 '15 at 16:44

0

Use position:absolute in css of the iframe.

.if {
  position:absolute;
  height:100%
  width:100%
}

edited Dec 05 '15 at 16:44

Brad Koch

19,267
19
110
137

answered Dec 05 '15 at 16:05

Mihir Ujjainwal

13
4

1

You cannot change the CSS of another domain. – Praveen Kumar Purushothaman Dec 05 '15 at 16:06
What are you trying to say? i meant the element with `if` class. – Mihir Ujjainwal Dec 05 '15 at 16:08

Why is this iframe height stuck at 150 px?

4 Answers4

See this fiddle