Div not expanding its height to variable iframe height

[bmpk]

Hi, all!

I have a very simple problem that’s giving me a very complex headache!

I have a roster for a class that is being updated constantly on an external source. I’m calling it to display via an iframe tag in my HTML code, and I’m placing that iframe tag inside of a div called roster.

Because the height of the roster is changing constantly as it gets updated each day, the height of the div the iframe is contained in needs to automatically adjust to whatever the height of the iframe happens to be.

The problem is, the div is going down maybe about a third of the way, and then cutting off and forcing me to scroll through the individual iframe to see the rest of the data, NOT stretching the entire length to display the entire iframe like I want it to.

Here’s the CSS snippet:

#roster {
  width: 65%;
  height: auto;
  padding: 10px;
  border: 5px;
  margin-left: auto;
  margin-right: auto;
  background-color: #000000;
}

…and here’s the iframe in the HTML file:

<iframe id="classRoster" src="http://example.com/roster.php" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; height:100%; display:block"></iframe>

Anyone have any ideas as to what may be going wrong?

[Atelierbram]

The resource being a external source is making a javascript solution probably difficult. Have you tried removing the height declaration from the iframe, and/or make this min-height?

Maybe try in a demo?

[Author]

Posts