[l008com]

Is there some trick you can use to make an Inline Frame automatically adjust its own height so that it just as tall as it needs to be to fit its content? I'm trying to insert a few different things, like an awstats page, a phpinfo page, and more in inline frames, but each one is different so I have to just make the frame a mile long and hope its long enough. I'd swear I saw a trick once but now I can't find it. It would be nice if "height = 100%" worked, but it don't.

[megus]

I feel your pain. You'd think it would be easy, but unfortunately its not.
This is one way of handling it (You call this function in the iframes onload handler):

Code:
function resizeFrame(id) {
    var myFrame = document.getElementById(id);
    if (myFrame) {
         if (myFrame.contentDocument && myFrame.contentDocument.body.offsetHeight) {
               // W3C
              myFrame.height = myFrame.contentDocument.body.offsetHeight;
         } else if (myFrame.Document && myFrame.Document.body.scrollHeight) {
              // MSIE
              myFrame.height = myFrame.Document.body.scrollHeight;
         }
    }
}

Unfortunately this isn't fullproof, since some browsers (e.g. Safari) sometimes hasn't finished formatting and could return an incorrect value. This is even more of a problem when adjusting both width and height. One way, but not a very fancy one, is to call the function a couple of times just to be sure, or maybe wait for a certain amount of time before excecuting the code.

In one case, were I really didn't want any unforeseen gaps in the layout I ended up with the following hack, where I copy the contents of a div in the iframe's contents and convert the iframe into a div with this contents.

Code:
function replace(id) {
     var body=document.getElementsByTagNames('body').item[0];
     var myFrame=document.getElementById(id);
     if (myFrame) {
         if (myFrame.contentDocument) {
            // W3C
            var html= myFrame.contentDocument.getElementById("contentsDiv").innerHTML;
         } else if (myFrame.contentWindow) {
            // MSIE
            var html = myFrame.contentWindow.document.getElementById("contentsDiv").innerHTML;
         }
         var myDiv = document.createElement("div");
         myDiv.innerHTML=html;
         var replaced=body.replaceChild(myDiv,myFrame);
    }
}

//megus

[Simon Mundy]

Originally posted by l008com:
Is there some trick you can use to make an Inline Frame automatically adjust its own height so that it just as tall as it needs to be to fit its content? I'm trying to insert a few different things, like an awstats page, a phpinfo page, and more in inline frames, but each one is different so I have to just make the frame a mile long and hope its long enough. I'd swear I saw a trick once but now I can't find it. It would be nice if "height = 100%" worked, but it don't.

Funnily enough it CAN work, you just have to be less compliant about the way you do things.

There was an article somewhere out there on the web that showed how to create a table to fit an 100% height for IE PC/Mac, Mozilla and Safari - I think it involves a) Using a page without a DOCTYPE and b) Setting the CSS of the page so that both the 'body' and 'html' elements are marked as 100% width and height. Then if you assign a 100% height to a frame or iframe your will get what you need.

Try a google search on that and see how you get on. It's not something you'd get high marks from 'A List Apart' from but it works.