Simple question about iframes

[jwermont]

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.

 

 

Edited January 15, 2019 by jwermont

[Ingolme]

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.

[jwermont]

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!

[Ingolme]

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.

[jwermont]

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!