0

So first, I know that there are a lot of scrollable div questions, but I did not see one that seemed to address my problem, so bear with me!

Here is what I am trying to do:

  • I need to display some content in an iFrame (it's a report output that I need to embed in my application).
  • I am hosting the iFrame in a div.
  • I want for the div and iFrame to size based upon the size of the user's browser window.
  • If the content in the iFrame is larger than the div, I want for the div to scroll
  • I can't make the iFrame scrollable, because this is really hosted in a larger UI construct -- if the iFrame had scrollbars, there could be 2 sets of scrolls in my "real" application (in "real life", I won't have control of the Div).

The problem: I get scrollbars, but a large report is still clipped vertically -- it's as though the scroll does not really take into account the full size of the div.

Here is my HTML:

<div style="width:100%; height:100%; overflow: auto">
  <iFrame src="a url" style="width:100%; height:100%" scrolling="no"></iFrame>
</div>

If I remove the overflow style from the div and make the iFrame scrollable, it works, but I can't do that in production, because the host for that iFrame really needs to own the scrollbars.

JMarsch
  • 21,484
  • 15
  • 77
  • 125

1 Answers1

0

Unfortunately the code that you have is not going to work. When you have a DIV set to 100% height its looking at the height in relation to the browser window so it stops there. It has no way of knowing how much height is needed that exists inside the iframe.

There may be a way to do what you want with JavaScript. Check this SO question and it may have a solutions you're looking for: Adjust width height of iframe to fit with content in it

Community
  • 1
  • 1
crazymatt
  • 3,266
  • 1
  • 25
  • 41