Question

On a page of my web app I include an iframe. The iframe typically has a pretty hefty height – let’s say on the order of 1500px. What ends up happening, naturally, is that the window now has two vertical scroll bars and the scroll wheel scrolls one or the other depending on the position of the cursor. This can make for a slightly awkward experience at first.

What I simply want to do is “flatten” the iframe. I’d like it to stretch it to be the full height of it’s contents, so that there is no need for a scroll wheel on it, and so that there will only be one vertical scroll wheel for the whole page. Can such a solution be done with only HTML+CSS, or will some javascript [w/jquery] be required?

Thanks in advance.

Answer 1

I do not believe this to be possible with CSS alone, but fairly simple with jQuery

var iframe = $("#my_iframe");
var iframeContents = iframe.contents()
iframe.css({
    height: iframeContents.outerHeight(),
    width: iframeContents.outerWidth()
});

working jsfiddle: http://jsfiddle.net/MUQ8V/3/