用div仿框架iframe结构布局
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="author" content="Chomo" /> 6 <link rel="start" href="http://www.14px.com" title="Home" /> 7 <title>div仿框架布局 - iframe无法适应高度的bug也一起被修复了</title> 8 <style type="text/css"> 9 * { margin:0; padding:0; list-style:none;} 10 html { height:100%; overflow:hidden; background:#fff;} 11 body { height:100%; overflow:hidden; background:#fff;} 12 div { background:#f60; line-height:1.6;} 13 .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} 14 .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} 15 .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;} 16 .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} 17 .main iframe { width:100%; height:100%;} 18 /*---ie6---*/ 19 html { *padding:70px 10px;} 20 .top { *height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} 21 .side { *height:100%; *float:left; *width:200px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} 22 .main { *height:100%; *margin-left:210px; _margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} 23 .bottom { *height:50px; *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} 24 </style> 25 </head> 26 <body> 27 <div class="top">看，亲爱的，iframe无法适应高度的bug也一起被修复了。不过这个修复也可以想想其他的办法：）办法就在本文中，有兴趣的朋友可以自己摸索。</div> 28 <div class="side"> 29 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 30 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 31 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 32 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 33 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 34 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 35 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 36 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 37 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 38 </div> 39 <div class="main"> 40 <iframe frameborder="0" src="http://www.g.cn/"></iframe> 41 </div> 42 <div class="bottom"></div> 43 </body> 44 </html>
div仿框架（B/S结构软件界面）方法详解
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
