CODEWITHSUNDEEP
javascriptjqueryhtmliframe
hellzone
hellzone

Reputation: 5236

How to set iframe height to fit content?

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';
});

Upvotes: 5

Views: 16279

Answers (2)

Super User
Super User

Reputation: 9642

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);
})

Upvotes: 3

Sergei Klykov
Sergei Klykov

Reputation: 1037

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;
}

Upvotes: 0

Related Questions