神奇的高度自适应
神奇的高度自适应，我现在也没有弄明白这究竟是咋回事。希望高手进来给解释一下，padding和margin这两个演员就把这常戏给导演了，厉害啊，不知道是那个打个发现的。。。。。。
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>无标题 1</title>
6 <style type="text/css">
7 * {margin: 0; padding: 0;}
8 body {margin:30px;font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
9 .main {overflow: hidden; width: 800px; margin: 0 auto;}
10 .left {float: left; width: 250px; overflow: hidden; }
11 .center {float:left; margin-left:5px; width:295px; }
12 .right {float: right; width: 245px; overflow: hidden;}
13 .bor_top { height:1px; background:#FB9D51; overflow:hidden; }
14 .equal {padding-bottom: 32767px; margin-bottom: -32767px;}
15 .box {background: #F5E2AF; border: 1px #FB9D51 solid; padding-left:10px; padding-right:10px;}
16 .mt5 {margin-top: 5px;}
17 </style>
18 </head>
19 <body>
20 <div class="main">
21 <div class="left equal">
22 <div class="box">
23 <p>你相信这个左右等高的布局是纯的CSS写的吗？</p>
24 </div>
25 <div class="box mt5">
26 <p>来测试一下吧？~！</p>
27 </div>
28 <div class="box mt5">
29 <p>测试一下</p>
30 </div>
31 <div class="equal mt5 box">
32 <p>测试一下</p>
33 <p>测试一下</p>
34 <p>测试一下</p>
35 <p>测试一下</p>
36 <p>测试一下</p>
37 <p>测试一下</p>
38 <p>测试一下</p>
39 <p>测试一下</p>
40 <p>测试一下</p>
41 <p>测试一下</p>
42 <p>测试一下</p>
43 <p>测试一下</p>
44 <p>测试一下</p>
45 <p>测试一下</p>
46 <p>测试一下</p>
47 <p>测试一下</p>
48 <p>测试一下</p>
49 <p>测试一下</p>
50 </div>
51 </div>
52 <div class="center equal">
53 <div class="box">
54 <p>不由得你不信，这个的确是纯CSS写的</p>
55 </div>
56 <div class="box mt5">
57 <p>来测试一下吧？~！</p>
58 </div>
59 <div class="box mt5">
60 <p>测试一下</p>
61 </div>
62 <div class="equal mt5 box">
63 <p>测试一下</p>
64 <p>测试一下</p>
65 <p>测试一下</p>
66 <p>测试一下</p>
67 <p>测试一下</p>
68 <p>测试一下</p>
69 <p>测试一下</p>
70 <p>测试一下</p>
71 <p>测试一下</p>
72 </div>
73 </div>
74 <div class="equal right">
75 <div class="box">
76 <p>测试一下</p>
77 <p>测试一下</p>
78 </div>
79 <div class="box mt5">
80 <p>测试一下</p> 在这里输入文本
81 <p>测试一下</p>
82 <p>测试一下</p>
83 </div>
84 <div class="box mt5">
85 <p>测试一下</p>
86 <p>测试一下</p>
87 <p>测试一下</p>
88 <p>测试一下</p>
89 <p>测试一下</p>
90 <p>测试一下</p>
91 </div>
92 <div class="equal mt5 box">
93 <p>测试一下</p>
94 <p>测试一下</p>
95 <p>测试一下</p>
96 </div>
97 </div>
98 </div>
99 <div class="main"><div class="left bor_top"></div><div class="center bor_top"></div><div class="right bor_top"></div></div>
100 </body>
101 </html>
102
哎不知道咋样在博客里弄出来可执行的代码？？？
