iframe height cut off

Question

Im working on a page, containing an iframe and i have a major problem in firefox. Im using this javascript for iframe sizing:

<script language="JavaScript"> function autoResize(id){
var newheight;
var newwidth;

if(document.getElementById){
    newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
    newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}

document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";    }

<iframe src="https://like-coppers.de/kundenbereich/" scrolling="no" border="none" width="100%" height="100%" name="CHANGETHIS" id="CHANGETHIS" marginheight="0" frameborder="0" onload="autoResize('CHANGETHIS');" onresize="autoResize('CHANGETHIS');"></iframe>

on chrome it works perfect(ignore border): but on firefox it gets cut off:

Do you know a solution for this?

In Firefox you need to query `documentElement.scrollHeight` instead of `body.scrollHeight` — CBroe, May 19 '17 at 10:08

score 1 · Accepted Answer · edited May 23 '17 at 12:26

1

In Firefox you need to query documentElement.scrollHeight instead of body.scrollHeight

Methods to automatically choose the correct property can be found in
.body.scrollHeight doesn't work in Firefox or
document.body.scrollHeight yielding two different results in firefox/chrome

edited May 23 '17 at 12:26

Community

1
1

answered May 19 '17 at 10:22

CBroe

91,630
14
92
150

Its now working in firefox, but in chrome it doesnt resize anymore: http://imgur.com/a/lhXSY I changed body.scrollHeight to documentEelment.scrollHeight – Herrsocke May 19 '17 at 10:50
1

You need to take both values into account; check the other questions I linked to, they have examples how to do that. – CBroe May 19 '17 at 10:52

score 0 · Answer 2 · answered May 19 '17 at 10:14

You have to put inline style to fix this issue style="overflow:hidden;min-height:600px;width:100%"

So your iframe will look like

<iframe src="https://like-coppers.de/kundenbereich/" style="overflow:hidden;height:100%;width:100%" scrolling="no" border="none" width="100%" height="100%" name="CHANGETHIS" id="CHANGETHIS" marginheight="0" frameborder="0" onload="autoResize('CHANGETHIS');" onresize="autoResize('CHANGETHIS');" ></iframe>

Hope this help you

iframe height cut off

2 Answers2