Jump to content
Sign in to follow this  
jwermont

Simple question about iframes

Recommended Posts

I created an iframe to display some text. I set the background color of the iframe to white. The iframe is inside a div element called "content." The colors work fine as long as I keep the height a certain number. (It's not clear what the exact number is, and it's probably dependent on other factors which I haven't figured out yet.) If I increase the height of the iframe beyond that, the background color of the area below the "cutoff" height takes on the same color as the enclosing div element.

Here's the definition for div.content:

div.content {
  position: absolute;
  top: 0;
  left: 250px;
  margin-left: 0;
  margin-right: 0;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding: 25px;
  background-color:#FFFBCF;
}

This is the iframe definition. It is enclosed in the content element:

<iframe src="init_iframe.html" style="height:300px;width:560px;border:3px solid #black;" name="iframe_a"></iframe>

I don't understand why it would do this. Anyone have an idea? Thanks.

iframe_245.png.f802305fb08009fbe17e818eb656b461.png

 

iframe_300.png.5524bd644cefab7b7e8e9cb7a209febc.png

 

Edited by jwermont

Share this post


Link to post
Share on other sites

The content of the page in the iframe is inside a wrapper with a white background, while the document itself does not have a set background color. Because of that, the white ends where the content does.

  • Like 1

Share this post


Link to post
Share on other sites

Ingolme - Thank you, that solved it!

I would like the iframe's height to conform to the content that is in it, so depending on what is loaded there, the box will have a different height. (I don't intend to load any content there that's too long.)

I looked around and discovered the css overflow attribute. But I don't understand the difference between the "scroll" and "auto" values. As far as I can see, both of them result in a scrollbar when the content overflows the box. Is there no attribute that will give the element more height if needed? (The element being an iframe in this case.)

Also, I'm curious: what's the difference between the overflow and overflow-y attributes?

Thank you!

Share this post


Link to post
Share on other sites

You cannot make the iframe's height match its content with CSS. You will need Javascript to measure the height of the content and set the frame's height. This only works if both pages belong to the same domain.

Share this post


Link to post
Share on other sites

Thanks again. I was reading about this on other sites, and most of them did give suggestions about javascript code. A few claimed that it could be done with css only, but in the comments people were mostly saying these ideas didn't work. I don't want it that badly. Mostly I just don't want the scroll bar. I made it bigger, and that problem was solved, at least!

Share this post


Link to post
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
Sign in to follow this  

×