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:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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.
The Wiert Corner - irregular stream of stuff 
Leave a comment