disable iframe auto resize

Question

I am working with a webpage with an iframe within it. The iframe has a fair amount of data in it and every-time it loads its height expands to the extent of the content within. However this puts my page out. Is there anyway to lock the height of the iframe and allow the user too scroll through the content??

Answer 1

Watch out for iOS. Its kinda screws everything up:

http://salomvary.github.io/iframe-resize-ios-safari.html

how to properly display an iFrame in mobile safari

Answer 2

Your iframe probably has height: 100%; set or even the height is being set via script of some sort. Technically you can set the height <iframe height="300"></iframe> or <ifreame style="height: 300px;"></iframe> = height of 300px.

Since you didn't provide any code, I cannot help you any further :( Provide your live example or code, then we can help you better. But generally, either try manually setting the iframes height, re-check your pages code.. maybe some script is setting the height or maybe the code inside the iframe..

Answer 3

Hmm, weird... do you have an example link of this issue?

When I try a simple iframe: http://jsfiddle.net/mP6wT/5/

<iframe src="http://example.org/"></iframe>

It seems to be sized pretty small by default, and scrolls in Chrome/FF/Win... Rather than adjusting to the height...

But at any rate, you should be able to lock the height with CSS: http://jsfiddle.net/mP6wT/7/

<iframe src="http://example.org/" style="height:400px;"></iframe>

Answer 4

Give the iframe a fixed height and scroll auto and you should be good.

<iframe height="100px" scroll="auto"></iframe>

Note that 100px is just an example, you might want to choose a height that suits you.