title: Setting border on scrollable HTML frame
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>The tree frame (and a minimal context) is defined as:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt;
  &lt;frameset cols="250,*" frameborder="0" framespacing="0" &gt;  
      &lt;frame src="tree.html" scrolling="auto" /&gt; 
      &lt;frame src="about:blank" name="navTarget" scrolling="auto" /&gt; 
  &lt;/frameset&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In the frame content (tree.html) I define the border as:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      html {
          border-right: red 2px solid;
          background: yellow;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/ohODp.png" alt="Tree content does not will the frame"></p>
  
  <p>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.</p>
  
  <p>That can in turn be fixed forcing the tree to expand to the available area:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      html {
          height: 100%;
          border-right: blue 2px solid;
          background:yellow;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/rzVkk.png" alt="Border disappers when scrolling down"></p>
  
  <p>UPDATE: This fails (i.e. border disappers when scrolling) in all of Chrome, Firefox and Opera.</p>
  
  <p>Is there a simple way to make it work as I want to also in other browsers?</p>
  
  <p>The background on the other hand works as expected, it will fill the entire frame area in all cases, so why not the border?</p>
  
  <p><strong>SOLUTION:</strong></p>
  
  <p>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%.</p>
  
  <p>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.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      html { height:100%; }
      body { min-height:100%; }
      body { border-right:blue 2px solid; }
  &lt;/style&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>&lt;!--[if lt IE 7]&gt;
  &lt;style type="text/css"&gt;
  body { height:100%; }
  &lt;/style&gt;
  &lt;![endif]--&gt;
  </code></pre>