用div仿框架iframe结构布局

最新推荐文章于 2021-08-06 13:08:23 发布

aijiangxiao8942

最新推荐文章于 2021-08-06 13:08:23 发布

阅读量488

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/Optimal/archive/2013/05/02/3054718.html

版权

 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>