Setting border on scrollable HTML frame

Question

I have a frame that will host a navigation tree. I want to have a blue border on the right side of the frame. This border should fill the entire frame area from top to bottom and the frame should also be scrollable.

The frame has no fixed size, it will fill the entire left side of the browser window and will change size when the user resizes the browser window.

The tree frame (and a minimal context) is defined as:

<html>
<head><title></title></head>
<frameset cols="250,*" frameborder="0" framespacing="0" >  
    <frame src="tree.html" scrolling="auto" /> 
    <frame src="about:blank" name="navTarget" scrolling="auto" /> 
</frameset>
</html>

In the frame content (tree.html) I define the border as:

<style type="text/css">
    html {
        border-right: red 2px solid;
        background: yellow;
    }
</style>

Now, if the tree content is large enough to fill the frame area (or larger, in which case scrollbars are automatically added) then this works well.

However, if the tree is "too small" and does not expand to fill the entire frame area, then the border will not fill the entire right side of the frame, but stop partway down.

Tree content does not will the frame

UPDATE: This seems to be browser specific. In Firefox 8 and Opera 11 the content border is cut short, but in Chrome it fills the whole right frame border.

That can in turn be fixed forcing the tree to expand to the available area:

<style type="text/css">
    html {
        height: 100%;
        border-right: blue 2px solid;
        background:yellow;
    }
</style>

But in this case when the tree is large enough to require scrolling you will notice that the border disappears when you scroll down. At least in modern browsers like IE8+, Firefox, Chrome and Opera. In IE6 the border will stay in place when scrolling for some reason.

Border disappers when scrolling down

UPDATE: This fails (i.e. border disappers when scrolling) in all of Chrome, Firefox and Opera.

Is there a simple way to make it work as I want to also in other browsers?

The background on the other hand works as expected, it will fill the entire frame area in all cases, so why not the border?

SOLUTION:

The solution finally found was to set the border on the BODY element instead of HTML as well as setting HTML element height to 100% and BODY element min-height to 100%.

Using min-height for BODY instead of height ensures that the border does not disappear when scrolling and that it does fill the entire border for "too short" contents.

<style type="text/css">
    html { height:100%; }
    body { min-height:100%; }
    body { border-right:blue 2px solid; }
</style>

Since IE6 does not support min-height we use plain height for it. Which happens to work in that browser (border does not disappear when scrolling), but not in more modern ones.

<!--[if lt IE 7]>
<style type="text/css">
body { height:100%; }
</style>
<![endif]-->

can't you add the border style not to inner html page but the iframe? — Zoltan Toth
"But in this case when the tree is large enough to require scrolling you will notice that the border disappears when you scroll down" --> I just think the scrollbar overlaps your right borders. But this statement makes me confused. The border only disappears when scrolling down ? — vantrung -cuncon
"The border only disappears when scrolling down" Yes, before you start scrolling it fills the entire right side of the frame content, but the parts of the content down below that becomes visible when you scroll down do not have a border for some reason. I guess this is because the border is created from the "height: 100%" which will be the size of the hosting frame. So only for the visible area of the content and not the whole scrollable area. — Niklas Bäckman

landons landons · Accepted Answer · 2011-11-15T18:03:22

Yup. As @Zoltan Toth said, add the styles to the iframe itself... (you may also need a frameborder="0" attribute in some browsers, and you'll want to do:

UPDATED:

In tree.html styles:

body { border:0; border-right: 2px solid blue; min-height: 400px; /* change this */ }

In referencing document:

<iframe src="tree.html" frameborder="0" style="border:0; width:400px; height:400px; "></iframe>

Setting border on scrollable HTML frame

1 Answers