xieerduos / iframe-height

Proposal for automatically setting an iframe height via HTML/CSS

iFrame Height

After the recent removal of the @seamless attribute on the <iframe> from the WHATWG spec (issue 331); we still need to consider the problem of setting the height of iframes, so they contain their content without scroll bars.

This proposal is to use 1 line of CSS:

<iframe src="./framed.html" id="iframe"></iframe>
<style>
	#iframe { height: max-content; }
</style>

And 1 header, to be set on the framed content (framed.html):

Expose-Height-Cross-Origin: 1;

This header is for security reasons, otherwise it can leak state information (e.g. the height of the page may determine if a user is logged in).

This was the main feature that @seamless needed to provide, rather than the <iframe> content being "rendered in a manner that makes it appear to be part of the containing document" (spec).

Further discussion on this proposal is on:

• W3C CSS Working Group
• WHATWG Issue Log
• W3C WWW-Style
• WICG

And the browser feature requests:

• Chrome
• Firefox
• Edge
• Opera
• Safari

---

Current solutions

1). Same Domain

It is possible to set the height with JavaScript (demo):

var iframe = document.getElementById('iframe'),
	height = iframe.contentWindow.document.body.scrollHeight;

iframe.style.height = height + 'px';

But this needs to be done whenever the content changes, such as navigating to a new page, or when new content is exposed (e.g. JS disclosure widget).

This can be solved with a setTimeout(), which is not ideal.

In the future ResizeObserver might help, but it still requires quite a bit of JavaScript, and does not work Cross-Domain.

2). Cross Domain

Due to the security restrictions in place, this requires the document in the <iframe> to use postMessage() every time the content changes.

This is currently custom code on every website, as no-one can agree on what format the postMessage() should use.

An example can be seen in these child and parent JavaScript files.

---

Potential problems

1. Infinite loops with media queries, raised by Jake Archibald (more details).
2. ???

---

Requests from other developers

• Queries on Stack Overflow - a common problem.
• Mozilla bug report from 2001 - in relation to seamless.
• Feature request from 2005 - with discussion of problems.
• Example JavaScript solution from 2010 - check the comments.
• Quite a few more.

---

Additional uses

Textarea

This could be set on a <textarea>, so its height automatically increases (demo / source):

textarea {
    height: max-content;
}

Examples:

• http://alistapart.com/article/expanding-text-areas-made-elegant
• http://www.impressivewebs.com/textarea-auto-resize/
• http://stephanwagner.me/auto-resizing-textarea
• http://github.com/thomasjo/jquery-autoresize
• https://github.com/javierjulio/textarea-autosize
• https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-autosize-textarea

Feature requests:

• WICG
• Chrome
• Firefox
• Edge
• Safari

Height animation

An alternative to "max-height: 10000px" when animating the opening/closing of a disclosure widget (demo / source):

#widget {
    overflow-y: hidden;
    height: max-content;
    transition-property: all;
    transition-duration: .5s;
}

#widget.closed {
    height: 0;
}

<p><a href="#widget">Show</a></p>
<div id="widget">
    <p>Hidden text</p>
</div>

Examples:

• https://davidwalsh.name/css-slide
• https://jsfiddle.net/ProLoser/nurx8/
• http://weblog.west-wind.com/posts/2014/Feb/22/Using-CSS-Transitions-to-SlideUp-and-SlideDown
• http://stackoverflow.com/questions/17301282/transitioning-between-open-close-in-details-element/17301828

Feature requests:

• WICG
• Chrome (WontFix)
• Firefox
• Edge
• Safari