CODEWITHSUNDEEP
htmlcssiframe
cade galt
cade galt

Reputation: 4161

Why is this iframe height stuck at 150 px?

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>

Upvotes: 1

Views: 3449

Answers (4)

Mihir Ujjainwal
Mihir Ujjainwal

Reputation: 23

Use position:absolute in css of the iframe. 

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

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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.

Upvotes: 2

Michael Benjamin
Michael Benjamin

Reputation: 371221

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

DEMO

Here's the explanation:

Upvotes: 1

Lal
Lal

Reputation: 14810

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.

Upvotes: 0

Related Questions