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 1,404 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:

I tried it at the [WayBackSpring4d generated documentation and it seems to work fine:

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

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 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ during the weekend.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

w

Connecting to %s

 
%d bloggers like this: