CODEWITHSUNDEEP
javascripthtmlcssiframe
epicwhale
epicwhale

Reputation: 1873

iframe with fixed width and DYNAMIC height

Is it possible to use an iframe with a fixed width (.ex. 75%) and a dynamic height? Want I want to achieve is that when the page that is loaded into the iframe, it will not be wider than I have specified, but the lenght needs to be according to the page its content. Is it a page with 5 lines text, the frame will be just big enough to display these 5 lines. Are we loading a large document with 1000 lines, the Iframe height will be automatically adjusted.

Prerequisites:

Upvotes: 4

Views: 2321

Answers (2)

user815437
user815437

Reputation:

I know you'd like to avoid it, but it really shouldn't slow you down so much that it'd be a burden on your site. I've done far crazier things with jquery and it's handled it like a champ. When talking "dynamic" it's usually a safe bet that you will need to touch some javascript at some point :P 

$(selector)[0].scrollHeight

As for making it dynamic? You could setup an interval to adjust the height.

Something like this: 

function setHeight(selector){ 
    var contentHeight = $(selector)[0].scrollHeight;
    $('#iframe-id').attr('height', contentHeight);
}

Then you either load it on page load or you wrap it in a setInterval.

If it's just the jquery thing and you don't mind javascript, then this site could help you http://www.mattcutts.com/blog/iframe-height-scrollbar-example/

Upvotes: 2

farina
farina

Reputation: 3566

IFrame height can be manipulated using the page rendering code, or JavaScript...but there is no way for the iframe to dynamically resize based on content.

The link in mplungjan's comment takes you to a really good post about this subject.

Upvotes: 0

Related Questions