5分割タイプの表示を行うためのスタイルシート

スタイルシートtips

IEのheightにバグがあるためbodyにheight:100%が必要。

 body {overflow:hidden;height: 100%;}
 div#main,div#header,div#footer,div#right,div#left { position: absolute;}
 div#header,div#footer,div#right,div#left { overflow: auto; }
 div#main { overflow: scroll; }
  /* width */
 div#header { left:  0%; width: 100%;}
 div#left   { left:  0%; width:  20%;}
 div#main   { left: 20%; width:  60%;}
 div#right  { left: 80%; width:  20%;}
 div#footer { left:  0%; width: 100%;}
  /* height */
 div#header                  { top:  0%; height: 10%;}
 div#left,div#main,div#right { top: 10%; height: 80%;}
 div#footer                  { top: 90%; height: 10%;}
 <body>
 <div id="main">...</div>
 <div id="header">...</div>
 <div id="footer">...</div>
 <div id="left">...</div>
 <div id="right">...</div>