Self-resizing frames

Integrating a web page inside another page can be performed very easily with the iframe tag. I noticed only one small problem: its sizing. If the width can be easily controlled at the zoom screen (100%), to choose the height: 100%; even by “amplifying” it (100%!important;) is not useful.

An elegant way is by using javascript, either embedded directly in the tag or as a callable function.

a. Embed variant

<iframe src="/test-pagina/" style="width:100%;border:none;" onload=" = this.contentWindow.document.documentElement.scrollHeight + 'px';"></iframe>

b. Using the function. In the <head> section, enter the function below, which can then be called in the iframe tag script.

function fc_redimens_frame(obj) { 100 + '%'; = 0; // height recalculation, otherwise it would just increase = obj.contentWindow.document.documentElement.scrollHeight+10 + 'px';

<iframe src="/test-pagina/" style="width:100%;border:none;" onload="fc_redimens_frame(this)"></iframe>

If the positioning of the “play tricks” iframe (possible overlap over other blocks of text / images) can be placed, both before and after, a div with the attribute clear:

<div style="display: block; clear: both;"></div>

Author: Ovidiu.S

I am quite passionate about this professional area as if I know something - no matter how little - I want to share it with others.

Leave a Reply