Iframe resizing: remarks, requirements and a script
by
, 09-22-2018 at 06:36 PM (17577 Views)
I. Proportional heights inside an iframed document must be (re)calculated with respect to the height of the parent document
There exists a variety of methods for setting the height of an iframe to match the height of its content. But I haven't found one that correctly handles the case of iframed documents containing elements with proportional heights ('vh' or '%'; correct me if I'm wrong). The problem is that, in a standard situation, any information sent to the iframe as regards to the proportional height ('%' or 'vh') of elements inside it will be interpreted by the iframe as information about percentages related to its own height, not as percentages related to the height of the main document. A script for setting the height of an iframe to match the height of its content should take this problem into account and make sure that proportional heights inside an iframed document will be (re)calculated with respect to the height of the parent document, not with respect to the height of the iframed document.
II. Fixed positioned elements inside an iframed document
'Position: fixed' inside a resized iframe doesn't make sense because the element is fixed relative to the iframe (which doesn't scroll anymore once it is resized), not to the parent document. Fixed positioned elements can even spoil the results of resizing an iframe, so a script for setting the height of an iframe to match the height of its content should replace all instances of 'position: fixed' with 'position: absolute'.
III. The height of the iframe should continue to match the height of its content when the iframe's content changes or when the window is resized
This seems a trivial remark but even a rather well-known code as that offered by https://www.dyn-web.com/tutorials/iframes/height/ doesn't always meet this requirement (as it does not meet the requirements made in I and II above either).
IV. A script that meets the requirements of I - III above
See this.