Layout de 2 columnas (liquid-fixed) + 3 filas (fixed-liquid-fixed)

Basado en: http://jsfiddle.net/5V288/7/ http://www.dynamicdrive.com/style/layouts/item/css-right-frame-layout/

by jrdiaz

HTML

<!--Force IE6 into quirks mode with this comment tag-->
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout</title>

<script type="text/javascript">
var gibberish = [ "This is just some filler text.", "Demo content nothing to read here." ];
function filltext( words ) {
for( var i = 0; i < words; i++ )
document.write( gibberish[ Math.floor(Math.random() * 3) ] + " " )
}
</script>
</head>
  
<body>

<!-- Left Frame -->
<div class="frmL">

    <div class="frmT P10">Header</div>
    <div class="frmC">
        <div class="scrollable">
            <div id="Contents" class="P10">
            
                <h1>Contents</h1>
                <p><script type="text/javascript">filltext(255)</script></p>
    
            </div>
        </div>
    </div>
    <div class="frmB P10">Footer</div>
        
</div>


<!-- Right Frame -->
<div class="frmR P10">
    
    <h1>CSS Right Frame Layout</h1>
    <p><script type="text/javascript">filltext(255)</script></p>

</div>


</body>
</html>

CSS

.BSBB { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; }
.P10  { padding:10px; }
.B    { border:1px solid red; }

/* HTML 100% width/height */
html, body {
    overflow:inherit; /* triggers 100% height in Opera 9.5 */
    height:100%; /* gives layout 100% height */
    min-height:100%; max-height:100%;
    position:relative;
    margin:0; padding:0; border:0;
}
/*
.wrapper { min-height: 100%; /* gives layout 100% height * / }
* html .wrapper { height: 100%; /* IE6 treats height as min-height * / }
*/


/* ---------- */
/* Layout ... */
.frmL, .frmR, .frmT, .frmB, .frmC { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; }
.scrollable { height:100%; width:100%; overflow:auto; }
/* ... de las columnas */
* html .frmL { height:100%; width:100%; } /* IE6 hack */
.frmL { overflow:hidden; position:absolute /*fixed*/; top:0; bottom:0; left:0; }
.frmR { overflow:auto;   position:absolute /*fixed*/; top:0; bottom:0; right:0; height:100%; }
/* ... de las filas */    
.frmT { position:absolute; width:100%; left:0; top:0;    }
.frmB { position:absolute; width:100%; left:0; bottom:0; }
.frmC { height:100%; } /* IMPORTANTE: Aplicar padding directamente a ".frmC" o ".frmC .scrollable" estropea el scroll salvo que se haga en un div interior a él */


/* -------------------------------------- */
/* Control del ancho y alto de los frames */
* html body { padding: 0 200px 0 0; /* Set value to (0 WidthOfFrameDiv 0 0) */ } /* IE6 hack */
.frmL { right:200px; } /* Equals to width of fixed width div */
.frmR { width:200px; } /* Width of fixed width div*/

.frmT { height:40px;  }
.frmB { height:40px;  }
.frmC { padding:40px 0 40px 0; /* Alto de frmT y el frmB */ }


/* -------------------- */
/* Colores y apariencia */
.frmL { background: #777; }
.frmR { background: navy; color: white; }
.frmT { background: green; }
.frmB { background: green; }
.frmC { background:...