How to make an iframe fit or fill 100% of its container’s remaining height – Sikwati
Posted by jpluimers on 2017/12/20
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.
[WayBack] How to make an iframe fit or fill 100% of its container’s remaining height – Sikwati
He made a lot of effort to get to this simple construct:
| <iframe src="/sample.pdf" width="100%" style="height: 100vh;"></iframe> |
I tried it at the [WayBack] Spring4d generated documentation and it seems to work fine:
| <!doctype html> | |
| <html class="no-js" lang=""> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <title>Spring4d generated documentation</title> | |
| <meta name="description" content="Documentation Insight generated documentation for Spring4D"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body> | |
| <!--[if lte IE 9]> | |
| <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p> | |
| <![endif]--> | |
| <h1>Generated documentation for <a href="http://www.spring4d.org" target="_blank">www.spring4d.org</a></h1> | |
| <!-- Add your site or application content here --> | |
| <p>The footer of the page indicates what <a href="https://bitbucket.org/sglienke/spring4d/branches/" target="_blank">branch</a> and date this was generated from all projects in the <a href="" target="_blank">Spring4D repository</a> by <a href="http://www.devjetsoftware.com/products/documentation-insight/" target="_blank">Documentation Insight</a>.</p> | |
| <p>You can either download the <a href="CHM/Spring4D.chm" target="_blank">CHM</a> file, open the <a href="Html/index.htm" target="_blank">HTML</a> content in a separate page or browse the HTML content below.</p> | |
| <iframe src="Html/index.htm" width="100%" style="height: 100vh;"></iframe> | |
| </body> | |
| </html> |
–jeroen
PS: Some more ideas from Roderick Gadellaa:
Roderick Gadellaa:
Hmm. Flexbox css? But that does involve extra containers..
…
Flexbox guide: www.google.nl/url?sa=t&source=web&rct=j&url=https://css-tricks.com/snippets/css/a-guide-to-flexbox/&ved=0ahUKEwiCp4qdr5jYAhWJ5qQKHUTUATcQFgglMAA&usg=AOvVaw13L8vethSS3eyj6Ne-toCj
google.nlThe idea would be to create a container with two elements. One takes as much space as it needs, the other one (with the iframe) is 100% height but shrinks as the first container requires space. Then you can just have the iframe use 100% x 100% of its parent (the second shrinking flexbox)
Jeroen Wiert Pluimers
Thanks. I’ll dig into https://css-tricks.com/snippets/css/a-guide-to-flexbox/ during the weekend.
Leave a Comment