How to set iframe height to fit content?

Question

I am trying to remove scrollbar from Iframe. When I set height of Iframe manually it works but Iframe size can change and I don't know how to get Iframe height when page loads.

Is there any way to remove scrollbar and fit Iframe content?

<div class="portlet" id="pageContainer">
    <iframe id="frame" width="100%" frameborder="0" height="2000" scrolling="false" allowfullscreen="" src="/app/mytestapp" style="overflow: hidden"></iframe>
</div>

When I try to below function it doesn't return correct height. (It returns 2000px but my Iframe height is nearly 3000px)

$('iframe').load(function() {        
    this.contentWindow.document.body.offsetHeight + 'px';
});

This line have no the purpose : this.contentWindow.document.body.offsetHeight + 'px'; . Try height="2000px" .Maybe overflow : hidden make invisible px of content iframe. — Nikola Lukic, Jan 13 '17 at 08:41

score 3 · Answer 1 · answered Jan 13 '17 at 09:50

3

You can use

$('iframe').load(function() {
    $('#frame').height($('#frame').get(0).contentWindow.document.body.offsetHeight + 'px');
})

or

$('iframe').load(function() {
    setTimeout(function(){
        $('#frame').height($('#frame').get(0).contentWindow.document.body.offsetHeight + 'px');
    }, 3000);
})

answered Jan 13 '17 at 09:50

Super User

9,448
3
31
47

already told that this code doesn't return Iframe's content height. – hellzone Jan 13 '17 at 11:17
@hellzone if you call it in `settimeout` function it will definitely work – Super User Jan 13 '17 at 11:25
Still not working. It still returns my custom Iframe height(2000px) but not Iframe's content height. – hellzone Jan 13 '17 at 11:38
If iframe's height is set to `2000px` and the contents only need `400px`, `scrollHeight` will return `2000px`. I.e. `scrollHeight` returns the current height if it's larger than the content height. To avoid this, set the iframe's height to `1px` briefly; then `scrollHeight` will return the content height. – nitsas Sep 04 '17 at 11:19

Panama Prophet · Answer 2 · 2017-01-13T08:54:41.327

0

Use this parameters to remove border and scrollbar

scrolling="no"
frameborder="no"

And this code for set iframe height

var width = $(window).width()
var height = $(window).height()

$('#frame').css({ width : width, height : height })

If you need to dynamically change the height to fit the window size, wrap the code above into function and use it on resize event at window, also make a call on document's ready event like this:

function iframeResize(){

    var width = $(window).width()
    var height = $(window).height()

    $('#frame').css({ width : width, height : height })
}

$(window).on('resize', iframeResize)
$(document).on('ready', iframeResize)

UPDATED

Also you need to carry about margin and paddings on a parent page of iframe. Default values causes scrollbars of a parent page. Something like this will be a simple solution if you dont need to carry about other element on a page except iframe.

* {
    margin: 0;
    padding: 0;
}

edited Jan 13 '17 at 08:54

answered Jan 13 '17 at 08:43

Panama Prophet

1,027
6
6

Its not working. $(window).height() returns my custom Iframe height which is 2000px and still I can see Iframe scrollbar. – hellzone Jan 13 '17 at 11:13
you trying to use this code inside iframe or outside? – Panama Prophet Jan 13 '17 at 11:16
$(window).height() returns height of a viewport, so i understand your question like you need to resize iframe to a parent's viewport – Panama Prophet Jan 13 '17 at 11:17
I have an Iframe and I want to show some website with this Iframe. This website has 3000px height. What I want to do is show this website with Iframe without scrollbar. – hellzone Jan 13 '17 at 11:22
ok, seems like you need resize iframe to fit its content. this question explained there - http://stackoverflow.com/questions/819416/adjust-width-height-of-iframe-to-fit-with-content-in-it – Panama Prophet Jan 13 '17 at 11:41

How to set iframe height to fit content?

2 Answers2