CODEWITHSUNDEEP
htmlcssiframe
bontade
bontade

Reputation: 3224

Height equal to 100% is not working for IFrame

Following by some topics on Stack Overflow like:

  1. Full-screen iframe with a height of 100%
  2. How do you give iframe 100% height [duplicate]
  3. Make Iframe to fit 100% of container's remaining height

I wanted to nest iframe on my web page. I am using bootstrap to style web page, so I used following code:

<div class="col-sm-6" style="margin:0px;padding:0px;overflow:hidden">
    <iframe id="iFrame1" src="<test_link_here>" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</div>

Unfortunately my iframe is not resized to full height. I would like somehow to resize it automatically to full height. Do you know how I can acheive it?

Upvotes: 4

Views: 6997

Answers (2)

Sajibur Munna
Sajibur Munna

Reputation: 1

An <iframe> (Inline Frame) is considered an inline element in HTML.

When setting the height of an to 100%, it may not work as expected due to several reasons related to how CSS handles percentage-based heights. Here is a simple solution:

Just try it:

.container {
 height: 100vh;
 display: flex;
 flex-direction: column;
}
.iframe {
 flex-grow: 1;
 flex-shrink: 0;  
 border: none;
}
<main class="container">
        <iframe
        class="iframe"
          src="https://example.com"
        ></iframe>
 </main>

Upvotes: 0

Louis &#39;LYRO&#39; Dupont
Louis &#39;LYRO&#39; Dupont

Reputation: 1112

What you want could actually be done by changing the height : 100%; value to height : 100vh;.The vh is a unit called ViewHeight, and your full screen height is actually 100vh;

Here is a post about length units from the Mozilla team.

Try this code :

<div class="col-sm-6" style="margin:0px;padding:0px;overflow:hidden">
    <iframe id="iFrame1" src="http://www.stackoverflow.com" frameborder="0" style="overflow:hidden;height:100vh;width:100%; border : 1px solid red;"></iframe>
</div>

Upvotes: 7

Related Questions