Jump to content

Styling iFrame


george
 Share

Recommended Posts

I have an iFrame which is linked to from a few anchor tags. That part works fine. My problem is, I'd like the height of my iFrame to be inherited from it's contents. I did notice that in the example page for iFrames setting the height to 100% works as I would expect. But not on my page. I did notice that when I create a CSS property using the iFrame's ID tag, and put a number of pixels in the CSS width and height attributes, they were accepted and the browser rendered appropriately. But not when I try and use 100% or auto or inherit. What can I do so the height is based on the content of the iFrame?

Edited by george
Link to comment
Share on other sites

Use javascript

<script type="text/javascript"><!--//function sizeFrame() {    var F = document.getElementById("myFrame");    var frameMethod = F.contentDocument.documentElement || F.contentWindow.document.body; // IE or other browser method             F.height = frameMethod.scrollHeight;        } window.onload=sizeFrame;//--></script>

<iframe width="100%" id="myFrame" src="mysite.html" scrolling="no" frameborder="0" />An iframe capable browser isrequired to view this web site.</iframe>

  • Like 2
Link to comment
Share on other sites

Using the approach suggested above, I get unexpected results. Right now, my site presents an alert box giving the scrollHeight for the iFrame content.If you go to the site, when it initially loads the Home page in the iFrame, and you will see the frame scrollHeight given, and when you scroll the page, you will see this is very close. When you select the My Resources menu option, the iFrame source is updated, and the alert box reflects the change in scrollHeight very closely.But then select the Home option, and the alert box shows a new value, which is far too large, and the height of the iFrame is also far too large. And when I keep selecting Home, each time the scrollHeight decriments. Mystery. Any ideas?

Link to comment
Share on other sites

clear the height before applying new

function load() {        var F = document.getElementById("myFrame");        var frameMethod = F.contentDocument.documentElement || F.contentWindow.document.body; // IE or other browser method        F.height ="";        F.height = frameMethod.scrollHeight;        alert(F.height );}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...