Cross-browser Iframe Height

[Rain_Lover]

I have a Google form embedded into my blog.

It looks ideal on Chrome — neither an extra scrollbar nor unwanted space below the iframe. But that's not true for other browsers, e.g. in Firefox there's an extra scrollbar. What should I do so it looks good on all browsers?

[edited by: not2easy at 5:44 am (utc) on Mar 30, 2015]
[edit reason] Removed Link per TOS/Charter [/edit]

[not2easy]

We'll need a look at your relevant css and html to help you find what might cause this problem and look for a solution.

[Rain_Lover]

Sure:

div {
 outline:1px solid red;
}
iframe {
 display:block;
 width: 100%;
 height: 625px;
 border: 0;
}

<div>
 <iframe src="https://docs.google.com/forms/d/1QICJwSJNEjSAGaVz7mWxq0FnrfDMZqOqMn0_iXM0ph8/viewform?embedded=true"></iframe>
</div>

[lucy24]

neither an extra scrollbar nor unwanted space

Since your CSS names an explicit pixel height, it will have to be one or the other. You could try replacing "height" with "max-height" to get rid of unneeded blank space; not sure if this will work as intended with all browsers. (Or, for that matter, with any browsers, since iframes* are a little different from other content.) Or you could specify "overflow: hidden" to get rid of scroll bars when the content is too tall, though this obviously has its drawbacks.


* My fingers really did type "iFrame".

[Rain_Lover]

You could try replacing "height" with "max-height" to get rid of unneeded blank space

Doesn't seem to work. Thanks, anyway!

[Rain_Lover]

I finally decided to give the iframe a larger height size and not to care about the blank space.