We have a server that presents courses to learners. The learning environment is configured using iframes. It was using framesets and worked perfectly.

We are now moving to HTML5 where framesets are no longer valid. So, we have replaced the framesets with iframes. The code below shows the structure of the iframes.

There are several nested iframes. There is additional div tags that are used to place the iframes into the structure in the image below, but they detract from the iframe code.

We are having problems with scrolling the tree iframe. If we set scrolling to no in the id="st" iframe, the id="tree" iframe does not scroll.

If we set scrolling to auto in the id="st" iframe, along with scrolling set to yes in the id="tree" iframe, then there is a scrollbar on both iframes. So, there are two scrollbars where we only need one.

The image below shows what the learning environment looks like with the setting listed in the paragraph above. We need a scroll bar only on the tree iframe. The header should not scroll.

Is there something that we are doing that is messing up what should be fairly simple?

Sorry, publishing the question messes up the formatting of the nested iframes in the code below.

Thank you for any help.


<iframe id="mf" src="toolbox" scrolling="no" style="margin:0px;padding:0px; margin:0px;"></iframe>
<iframe id="tb" src="toolbar" scrolling="no">
<iframe id="st" src="$TOOLBOX" scrolling="auto" style="position:absolute;left:0px;top:0px;">
<iframe id="header" src="mycourse.htm" scrolling="no" style="position:absolute;left:0px;"></iframe>
<iframe id="tree" src="mytree.htm" scrolling="yes" style="position:absolute;left:0px;top:100px;"></iframe>
</iframe>
<iframe id="sc" src="$SWIFTCONTENT" scrolling="auto" style="position:absolute;right:0px;top:0px;"></iframe>
</iframe>
<iframe id="sb" src="/htm/statusbar.htm" scrolling="no"></iframe>


Nested iframe scrolling issue-le.png