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.
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.