一个标准的，兼容性很好的div仿框架的基础模型！-优快云博客

本文提供了一个使用DIV实现的仿框架网页布局特效代码示例，该布局具备良好的兼容性，适用于多种浏览器环境，包括IE6。通过绝对定位实现了顶部、侧边栏、主要内容区及底部的布局，并针对不同浏览器进行了样式调整。

<!DOCTYPE html>
<html >
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>div层仿网页框架布局特效代码 - by 阿里西西 js.alixixi.com</title>
  <style type="text/css">
   * { margin:0; padding:0; list-style:none;}
   html { height:100%; overflow:hidden; background:#fff;}
   body { height:100%; overflow:hidden; background:#fff;}
   div { background:#f60; line-height:1.6;}
   .top { position:absolute; left:10px; top:10px; right:10px; height:50px;}
   .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;}
   .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;}
   .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;}
   /*---ie6---*/
   html { _padding:70px 10px;}
   .top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
   .side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
   .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
   .bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
  </style>
 </head>
 <body>
  <div class="top"></div>
  <div class="side">
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
  <div class="main">
    <div style="width: 100%;">阿里西西 网页特效演示中心</div>
   <br /><br /><br />DEMO BY JS.ALIXIXI.COM<br />
   一个标准的，兼容性很好的div仿框架的基础模型！<br />
   <br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
  <div class="bottom"></div>
 </body>
</html>