How to make an iframe fit or fill 100% of its container’s remaining height

There are a lot of suggested solutions out there: mostly not working when I tried them, and some required several lines of code which seems unnecessary for such a simple issue.

After a lot of testing, I found one solution that worked 100%, at least for a PDF I’m trying to embed and display in full height using an iframe on a page.

It came from a short answer from Stack Overflow user sree when the same problem was asked there.

<iframe src="/sample.pdf" width="100%" style="height: 100vh;"></iframe>

How it works

We set set the iframe’s width to 100%. This makes the iframe stretch out to fit the full width of the src file/page.

So, give it an attribute=value of height="100%" too?

While we can, it doesn’t work the way we expect it to.

You can research about it but as far as I know and have tried, the height attribute only works with pixel values, not percentage.

As a workaround, we style the iframe by giving it a relative height value in viewport units (vh) instead of absolute pixels.

Why not style it with height: 100%;?

It doesn’t work, unless the iframe’s container e.g. a div has a defined height itself e.g. <div style="height: 500px;"><iframe … > … </iframe></div>.

I’m not exactly sure how to explain why viewport units work best (also, different browsers may have varying interpretations for its value) though there are articles explaining what they are that you can refer to.

A number of commenters have suggested the following though so try and see which one works for you as well:

The thing here is that there is no one-exact-value solution to different cases, so you may have to test and see what viewport height (vh) value you need.

Where to place it

Just add width="100%" style="height: 100vh;" inside the opening iframe tag, preferably right after the src attribute.

Did this approach work for your case? Did you come up with another working solution for your problem? Let us know in the in the comments section down below.

Published by

Bibiano Wenceslao

Father of one. Works from home. Interested about UX, social media, web trends, customer service, workflow automation, technology and life.

31 thoughts on “How to make an iframe fit or fill 100% of its container’s remaining height”

  1. This worked! I can see that the iframe is quite tall, but that’s ok.

    I wonder if viewport units would also do the trick?
    vw: 1/100th viewport width
    vh: 1/100th viewport height
    vmin: 1/100th of the smallest side
    vmax: 1/100th of the largest side

      1. Hey Alan – Thanks for testing things out and sharing the results with us here. In most situations I think using viewport units indeed works better than others. I’ve updated the post and mentioned you and your suggestion in the “How it works” section. Thanks again!

  2. Thanks for the post. This is a real issue with HTML5 not allowing 100% element. 11vh is working for me. I will update as the project moves along, as I am using variable sized tabs within the iframe contents.

  3. This is pretty misleading. 100em is not equal to 100% of the screen height. It is equal to 100 times the size of your font, i.e. some arbitrarily large number of pixels. Depending what’s in your iframe this may work for you. For me, it didn’t. I just ended up with a vertical scroll bar and my content half-way down the page.

    100vh seemed to work!

  4. Absolutely fantastic. Thank you very much for posting this. I’ve spent several hours trying all the non-working answers like you indicated.

  5. I found that height:100vh in the iframe element with a fixed 800px height in the surrounding div did the same thing as just adding height:800px to the iframe tag. I’m trying to display reports which have varying heights in the iframe (based on the pagination parameters, etc.) and so there were no settings I tried which got rid of the “scrollbars within scrollbars” effect. Alas, I wish “seamless” would become widely supported in HTML 5. 🙁

    1. According to sizing with CSS3’s vw and vh units:

      With vw/vh, we can size elements to be relative to the size of the viewport. The vw/vh units are interesting in that 1 unit reflects 1/100th the width of the viewport. To make an element the full width of the viewport, for example, you’d set it to width:100vw.

      iframes indeed are a bit unweildy in certain cases like yours. Maybe we’ll have a better way of handling these kinds of embedded content in the future. 🙂

  6. An important distinction I feel you must make is the doctype. Only in HTML4 is it allowed to set a percentage on the width or height. In HTML5 a percentage value is not allowed on this property.

  7. Okay, that was a ridiculously-simple work-around for a problem I’ve been wrestling with all weekend. Thank you!!

    (I personally believe that ‘height=”100%”‘ should work, and that the fact that it doesn’t, no matter the reasoning for the HTML standard-setters, is a *bug*. But, meh, who am I to say? At any rate, your solution is an awesome one; thanks!)

Leave a Reply