常用的有三种方式：
1、绝对定位法（最易理解）
左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。
1 <html>
2
3 <head>
4
5 <title>三栏自适应布局</title>
6
7 <style type="text/css">
8
9 html,body{
10
11 margin:0;
12
13 height:100%;
14
15 }
16
17 #left,#right{
18
19 position:absolute;
20
21 top:0;
22
23 width:200px;
24
25 height:100%;
26
27 }
28
29 #left{
30
31 left:0;
32
33 background:red;
34
35 }
36
37 #right{
38
39 right:0;
40
41 background:purple;
42
43 }
44
45 #main{
46
47 margin:0 205px;
48
49 background:blue;
50
51 height:100%;
52
53 }
54
55 </style>
56
57 </head>
58
59 <body>
60
61 <div id="left"></div>
62
63 <div id="main"></div>
64
65 <div id="right"></div>
66
67 </body>
68
69 </html>
2、margin负值法（不易理解）
1 html,body{margin:0; height:100%;}
2 #main{width:100%; height:100%; float:left;}
3 #main #body{margin:0 210px; background:#ffe6b8; height:100%;}
4 #left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
5 #left{margin-left:-100%;}
6 #right{margin-left:-200px;}
7
8 <div id=”main”>
9 <div id=”body”></div>
10 </div>
11 <div id=”left”></div>
12 <div id=”right”></div>
重点是第一个div是中间的main，且必须套一个容器。
3、浮动法（最常见）
1 <html>
2 <head>
3 <title>三栏自适应布局</title>
4 <style type="text/css">
5 html,body{
6 margin:0;
7 height:100%;
8 }
9 #main{
10 height:100%;
11 margin:0 210px;
12 background:blue;
13 }
14 #left,#right{
15 width:200px;
16 height:100%;
17 background:red;
18 }
19 #left{
20 float:left;
21 }
22 #right{
23 float:right;
24 }
25 </style>
26 </head>
27 <body>
28 <div id="left"></div>
29 <div id="right"></div>
30 <div id="main"></div>
31 </body>
32 </html>
重点是中间的main要放在标签最后，缺点是需要用clear:both。
时间： 2024-10-02 03:53:11