IE6 "Frame" Layout with 100% Height and Scrollbars

IE6 frame layout with 100% height and scrollbars

In my previous answer, I was absolutely wrong (no pun intended), as you can't specify both top and bottom in IE6, neither both left and right. Moreover, you don't know the exact width and height of the content div, nor do you know them as a percentage of the viewport.

When I solved this, I put IE into quirks mode, to get the border-box box model (see also W3C spec). To use the same CSS rules for more standards compliant browser, you can use the box-sizing property (and variants). After doing this, the borders get inside the contents and you can push your contents down and to the right by specifying a border (width and style):

<!-- put IE in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>IE6 'frames'</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -khtml-box-sizing: border-box;
      -webkit-box-sizing: border-box;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #top {
      position: absolute;
      top: 0;
      width: 100%;
      background-color: #ddd;
      height: 100px;
      z-index: 2;
    }

    #left {
      position: absolute;
      left: 0;
      border-top: 100px solid;  /* move everything below #top */
      background-color: #bbb;
      width: 120px;
      height: 100%;
      overflow: hidden;
      z-index: 1;
    }

    #main {
      position: absolute;
      border-top: 100px solid;
      border-left: 120px solid;
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  </style>    
</head>
<body>
  <div id="top">Title</div>
  <div id="left">LeftNav</div>
  <div id="main">
    <p>
      Lorem ipsum ...<br />
      <!-- just copy above line many times -->
    </p>
  </div>
</body>
</html>

UPDATE: In IE >= 7 and more standards compliant browsers you can use position: fixed together with both top and bottom (et al.) rules. There is a way to get this frame-like appearance in IE6 in Standards Mode (or rather, Almost Standards Mode) using CSS expressions. This way, you can let the JScript engine calculate the correct values of width and height (added between conditional comments).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>'Frames' using <div>s</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #top, #left, #main {
      position: fixed;
      overflow: hidden;
    }

    #top {
      top: 0;
      width: 100%;
      background-color: #ddd;
      height: 100px;
    }

    #left {
      left: 0;
      top: 100px;  /* move everything below #top */
      bottom: 0;
      background-color: #bbb;
      width: 120px;
    }

    #main {
      top: 100px;
      left: 120px;
      bottom: 0;
      right: 0;
      overflow: auto;
    }
  </style>
  <!--[if IE 6]>
  <style>
    #top, #left, #main {
      position: absolute;
    }

    #left {
      height: expression((m=document.documentElement.clientHeight-100)+'px');
    }

    #main {
      height: expression((m=document.documentElement.clientHeight-100)+'px');
      width: expression((m=document.documentElement.clientWidth-120)+'px');
    }
  </style>
  <![endif]-->
</head>
<body>
  <div id="top">Title<br /></div>
  <div id="left">LeftNav<br /></div>
  <div id="main">
    <p>
        Lorem ipsum ...<br />
        <!-- just copy above line many times -->
    </p>
  </div>
</body>
</html>

That said, I don't recommend this method. It will slow down the browsing experience of the already not too fast IE6 noticeably, as these expressions are evaluated many times.

Just one more sidenote: I suppose you'll use external style sheets (and scripts) in the end, but if you want to embed those inside an XHTML document, use “CDATA markers and comments appropriate for the script or style language used”, as David Dorward recommends.

ModalPopupExtender doesn't work on IE6 frame layout

I've implemented a variant of the solution in this answer, which appears to solve the problem:

For IE6, conditionally make the #main div position:static with margin-left equal to the
width of the #left div. Unfortunately margin-top doesn't seem to work in IE6, so...
For IE6, conditionally add an empty div with the id ie6-spacer before the main div.
Set the height of the ie6-spacer div to the same height as the #top div.

This appears to the trick.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>'Frames' using <div>s</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #top, #left, #main {
      position: fixed;
      overflow: hidden;
    }

    #top {
      top: 0;
      width: 100%;
      background-color: #ddd;
      height: 100px;
    }

    #left {
      left: 0;
      top: 100px;  /* move everything below #top */
      bottom: 0;
      background-color: #bbb;
      width: 120px;
    }

    #main {
      top: 100px;
      left: 120px;
      bottom: 0;
      right: 0;
      overflow: auto;
    }
  </style>
  <!--[if IE 6]>
  <style>
    #top, #left {
      position: absolute;
    }

    #ie6-spacer {
        height:100px;
    }

    #left {
      height: expression((m=document.documentElement.clientHeight-100)+'px');
    }

    #main {
      margin-left:120px;
      height: expression((m=document.documentElement.clientHeight-100)+'px');
      width: expression((m=document.documentElement.clientWidth-120)+'px');
    }
  </style>
  <![endif]-->
</head>
<body>
  <div id="top">Title<br /></div>
  <div id="left">LeftNav<br /></div>
  <!--[if IE 6]>
  <div id="ie6-spacer"></div>
  <![endif]--> 
  <div id="main">
    <p>
        Lorem ipsum ...<br />
        <!-- just copy above line many times -->
    </p>
  </div>
</body>
</html>

iFrame 100% height causes vertical scrollbar

It's not the iframe that produces the scrollbar, it's the whitespace after it

    <iframe src="http://www.bbc.co.uk" frameborder="0"></iframe>
    <!-- Whitespace here; This is being rendered! -->
</body>

If you don't want to see it, use

* { line-height: 0; }

edit: Turns out the problem persists if you remove the whitespace, but the solution is the same. Iframes are rendered as inline elements by default (iframe = 'inline frame'), and thus have a line-height which causes the issue.

Alternatively, you may want to try iframe { display: block; } or a combination of both solutions.

Auto height div with overflow and scroll when needed

Well, after long research, i found a workaround that does what i need:
http://jsfiddle.net/CqB3d/25/

CSS:

body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
}

#caixa{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#framecontentTop, #framecontentBottom{
    position: absolute; 
    top: 0;   
    width: 800px; 
    height: 100px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white; 
}

#framecontentBottom{
    top: auto;
    bottom: 0; 
    height: 110px; /*Height of bottom frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white;
}

#maincontent{
    position: fixed; 
    top: 100px; /*Set top value to HeightOfTopFrameDiv*/
    margin-left:auto;
    margin-right: auto;
    bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
    overflow: auto; 
    background: #fff;
    width: 800px;
}

.innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
    padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}

* html #maincontent{ /*IE6 hack*/
    height: 100%; 
    width: 800px; 
}

HTML:

<div id="framecontentBottom">
    <div class="innertube">
        <h3>Sample text here</h3>
    </div>
</div>
<div id="maincontent">
    <div class="innertube">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text...
    </div>
</div>

might not work with the horizontal thingy yet, but, it's a work in progress!

I basically dropped the "inception" boxes-inside-boxes-inside-boxes model and used fixed positioning with dynamic height and overflow properties.

Hope this might help whoever finds the question later!

EDIT: This is the final answer.

Make body have 100% of the browser height

Try setting the height of the html element to 100% as well.

html, 
body {
    height: 100%;
}

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.

However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.

html {
  height: 100%;
}
body {
  min-height: 100%;
}

CSS 100% Height, and then Scroll DIV not page

<html>
  <body style="overflow:hidden;">
    <div style="overflow:auto; position:absolute; top: 0; left:0; right:0; bottom:0">
    </div>
  </body>
</html>

That should do it for a simple case

I believe this will work for your case

<html>
  <body style="overflow:hidden;">
      <div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;"></div>
      <div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0; right:200px; bottom:50px;"></div>
      <div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0; bottom:50px;"></div>
      <div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div>
  </body>
</html>

this example will give you a static header and footer and allow the navigator and content area to be scrollable.

Setting border on scrollable HTML frame

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>

IE6 "Frame" Layout with 100% Height and Scrollbars