Question

What I am trying to achieve is to have a scrollable, auto-re-sizable div inside an iframe.

The problem is that iframe, unlike a div, has a scroll in itself, therefore the overflow-y property of my div is ignored, and entire content of my div is displayed, instead of a just a small portion.

The best explanation is a sample, which you can view by clicking
http://www.alocet.com/VictorsTestFolder/Sample/Default.html

When I’ve added CSS “html,body,form{ height:100%; margin:0px; padding:0px;}” to IFrame page, it almost worked, but unfortunately I wasn’t able to get rid of duplicate scroll-bars.

Any suggestions?

Answer 1

I’m going to go out on a limb and say that you can’t really do the thing you want to do without JavaScript.

Divs just don’t work like that. They typically overflow as far as needed, spilling wherever. The only way to keep a div from being sized according to its contents (I’m speaking on experience) is to give it an explicit height. Otherwise, it will either spill out of its container or, if its container is its own block formatting context, cause its container to start scrolling.

The iframe appears to be its own context. Thus, you MUST set an explicit height if you want the div it contains to keep itself compact. Two options I see:

You can add a parameter for the server to change the page’s height:

<iframe src="Default_files/IFrame2.htm?h=400"

Then, create a containing div for the whole page with a fixed height that fits within the iframe. Everything inside of it should flow properly. Then, set the div that might have a lot of content to a fixed size.

The other option is to use JavaScript, which I think can obtain exactly the variables you’re looking for using document.documentElement.clientWidth. See this article for more details. Even in this case, you still end up setting the framed page to a fixed height.

Both methods are sketchy workarounds, but I’m somewhat confident you can’t do what you want with just CSS.