The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

  • Twitter Updates

  • My Flickr Stream

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 2,483 other followers

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.

[WayBackHow 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 [WayBackSpring4d generated documentation and it seems to work fine:

<!doctype html>
<html class="no-js" lang="">
<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">
<!–[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="">upgrade your browser</a> to improve your experience and security.</p>
<h1>Generated documentation for <a href="" target="_blank"></a></h1>
<!– Add your site or application content here –>
<p>The footer of the page indicates what <a href="" target="_blank">branch</a> and date this was generated from all projects in the <a href="" target="_blank">Spring4D repository</a> by <a href="" 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>


PS: Some more ideas from Roderick Gadellaa:

Roderick Gadellaa:
Hmm. Flexbox css? But that does involve extra containers..

Flexbox guide:

The 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 during the weekend.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: