xhtml+css来模拟frameset

基本上来说，由于IE6的存在，用xhtml+css来模拟frameset是很困难的事情，处理的手段我已知的仅以下几点：
1. 将IE6转人Quirks mode，其他浏览器采用position:absolute定位。
2. 利用IE6的html标签的盒模型解释与其他标签不一致，来实现这个（100%-n像素）的高度，其他浏览器采用position:absolute定位。
3. 固定头尾，中间采用“padding”限定顶部距离和底部距离，非常憋脚但无hack的方法

 

1、优化主要目的：解决IE6中采用quirks模式存在弊端的模式。
优化主要方法：利用IE6中<html>标签的盒模型bug添置top与bottom的空白区域。
优化后的演示：

View Code 
 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>

 

2、IE存在通病，直接父体未设置高度，则子对象height:100%失效。
但IE7对position:absolute;的解释已经修复了，so，你可以：加句：
position:absolute; left:0; top:0; right:0; bottom:0;

View Code 
 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=gb2312" />
 5 <title></title>
 6 <style type="text/css">
 7 *{ margin:0; padding:0;}
 8 html{ padding:0; _padding:100px 0; width:100%; height:100%; overflow:hidden; font-size:12px; font-family:"宋体";}
 9 body{ padding:100px 0; _padding:0; height:100%; overflow: hidden;}
10 .l_top { position:absolute; top:0; width:100%; height:100px; background:#75bfde; line-height:100px; text-align:center;}
11 .l_body { position: absolute; _position: relative; top:100px; _top:0; bottom:100px; width:100%; height:auto; _height:100%; background:#ffc; text-align:center;}
12 .l_bottom { position:absolute; bottom:0; width:100%; height:100px; background:#d1edf8; line-height:100px; text-align:center;}
13 .l_main { padding-left:200px; height:100%; float:left;}
14 .l_content { position:absolute; _position:relative; width:auto; left:200px; top:0; bottom:0; _left:0; right:0; height:auto; _height:100%; overflow:auto; background:#93d2ec;}
15 .l_side { position:absolute; _position:relative; width:200px; left:0; top:0; bottom:0; _left:0; height:auto; _height:100%; _margin-left:-100%; _float:left; overflow:auto; background:#93d2ec; }
16 </style>
17 </head>
18 <body>
19 <div class="l_top">顶部</div>
20 <div class="l_body">
21   <div class="l_main">
22     <div class="l_content"><iframe id="carnoc" src="http://www.g.cn" scrolling="yes" frameborder="0" style="width:100%;height:100%;position:absolute; left:0; top:0; right:0; bottom:0;"></iframe></div>
23   </div>
24   <div class="l_side"> 无<br />
25     标<br />
26     题<br />
27     文<br />
28     档<br />
29     无<br />
30     标<br />
31     题<br />
32     文<br />
33     档<br />
34     无<br />
35     标<br />
36     题<br />
37     文<br />
38     档<br />
39     无<br />
40   </div>
41 </div>
42 <div class="l_bottom">底部</div>
43 </body>
44 </html>

 

 

3、

View Code 
 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 <title>无标题文档</title>
 6 </head>
 7 <style>
 8 * { margin:0; padding:0; font-size:12px; list-style:none;}
 9 html,body { height:100%; background:#fff; overflow:hidden;}
10 body { position:relative;}
11 .top { position:absolute; top:0; height:20px; width:100%; background:#f60; right:17px;}
12 .bottom { position:absolute; bottom:0; height:20px; right:17px; width:100%; background:#f60;}
13 .topContent,
14 .bottomContent { padding-left:17px; height:20px;}
15 .body { height:100%; overflow:scroll; overflow-x:hidden;}
16 .bodyContent { margin:20px 0;}
17 </style>
18 <body>
19 <div class="top">
20     <div class="topContent">顶部</div>
21 </div>
22 <div class="body">
23     <div class="bodyContent">
24         主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
25         主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
26         主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
27         主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
28         主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
29         主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
30         主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
31         主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
32         主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
33         主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
34     </div>
35 </div>
36 <div class="bottom">
37     <div class="bottomContent">底部</div>
38 </div>
39 </body>
40 </html>

 

posted @ 2012-02-14 16:30  青春无敌小宇宙  阅读(336)  评论(0)  编辑  收藏  举报