Fixed-Fluid Layout - Equal Height - Responsive - Custom Classes But Simple

by bizamajig

HTML

<div id='head'>header: width = 100%, height = 40px</div>
<div id='main'>
    <div id='left'>left: width = 250px, height = 100%</div>
    <div id='right'>right: width = 100% - 250px, height = 100%</div>
</div>
<div id='foot'>foot: width = 100%, height = 60px</div>

CSS

*      {margin:0; padding:0;}
body   {background:#fff; width:100%; height:100%;}
#main  {background:#888; position:absolute; top:40px; bottom:60px; width:100%;}
#head  {background:#f8f; position:absolute; width:100%; height:40px; overflow:auto;}
#left  {background:#ff8; position:absolute; width:250px; height:100%; overflow:scroll;}
#right {background:#8f8; margin-left:250px; height:100%; overflow:scroll;}
#foot  {background:#f88; position:absolute; bottom:0; width:100%; height:60px; overflow:auto;}