1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <meta http-equiv="Content-Language" content="zh-cn" />
7 <title>div仿框架布局之典型的两栏布局
</title>
8 <meta name="Description" content="摆脱frameset的束缚，以div代替，通过css实现仿框架布局" />
9 <meta name="Keywords" content="div布局, div仿框架布局, 两栏布局" />
10 <meta name="author" content="" />
11 <style type="text/css">
12 html,body{
13 overflow:hidden;
14 height:100%;
15 margin:0;
16 padding:0;
17 font:14px/1.8 Georgia, Arial, Simsun;
18 }
19 html{
20 _padding:110px 0;
21 }
22 #hd{
23 position:absolute;
24 top:0;
25 left:0;
26 width:100%;
27 height:100px;
28 background:#999;
29 }
30 #bd{
31 position:absolute;
32 top:110px;
33 right:0;
34 bottom:110px;
35 left:0;
36 overflow:hidden;
37 width:100%;
38 _height:100%;
39 }
40 #side{
41 position:absolute;
42 top:0;
43 left:0;
44 bottom:0;
45 overflow:auto;
46 width:200px;
47 _height:100%;
48 background:#666;
49 }
50 #main{
51 position:absolute;
52 _position:static;
53 top:0;
54 right:0;
55 bottom:0;
56 left:210px;
57 overflow:auto;
58 _overflow:hidden;
59 _height:100%;
60 _margin-left:210px;
61 background:#666;
62 }
63 #content{
64 _overflow:auto;
65 _width:100%;
66 _height:100%;
67 }
68 #ft{
69 position:absolute;
70 bottom:0;
71 left:0;
72 width:100%;
73 height:100px;
74 background:#999;
75 }
76 /* 与布局无关，一些说明性内容样式 */
77 .tit-layout{margin:30px 0 0;font-size:18px;text-align:center;}
78 .copyright{font-weight:bold;text-align:center;}
79 #feature{width:200%;line-height:4;}
80 #feature .hd{padding:20px 15px;}
81 #feature .hd h2{margin:0;font-size:16px;}
82 #feature .bd ol{margin-top:0;}
83 #feature .bd h3{margin:0;padding:0 15px;font-size:14px;}
84 #feature .ft{padding:10px 15px 30px;}
85 </style>
86 </head>
87 <body>
88 <div id="hd">
89 <h1 class="tit-layout">div仿框架布局之典型的两栏布局Version2.0（Private）
</h1>
90 </div>
91 <div id="bd">
92 <div id="side">侧边栏
</div>
93 <div id="main">
94 <div id="content">
95 <div id="feature" class="feature">
96 <div class="hd">
97 <h2>div仿框架布局Version2.0的特征：
</h2>
98 <span>update: 2008.09.22
</span>
99 </div>
100 <div class="bd">
101 <h3>优点：
</h3>
102 <ol>
103 <li>以div代替frameset，用css实现仿框架布局
</li>
104 <li>在web标准模式Standard Mode下运行
</li>
105 <li>兼容IE6,7,8; Firefox; Chrome; Safari; Opera浏览器，没被列入的浏览器未测试
</li>
106 <li>内容栏区域可以允许出现宽为100%或超100%的元素，如：
107 <p><div class=
"main
"><div style=
"width:100%;
"></div
></div
></p>
108 <p><div class=
"main
"><iframe style=
"width:100%;
"></iframe
></div
></p>
109 </li>
110 <li>适用于：后台；邮箱等地方
</li>
111 </ol>
112 </div>
113 <div class="ft">
114 <a href="http://blog.doyoe.com/" title="去css探索之旅浏览更多div布局文章">More
</a>
115 </div>
116 </div>
117 </div>
118 </div>
119 </div>
120 <div id="ft">
121 <address class="copyright">Copyright
© <a href="http://blog.doyoe.com/">doyoe.com
</a></address>
122 </div>
123 </body>
124 </html>
转载于:https://www.cnblogs.com/Optimal/archive/2013/05/02/3054680.html
相关资源：html5 div模仿iframe布局框架
