去百度面试遇到的一个流体布局
去百度面试，考官问了一个布局，整体是流体布局，宽和高都是100%，分4块，左边两块宽度都是200px，右边两块的宽度自适应，左上一块高度100px，左下一块高度自适应，右上一块高度100px，右下一块高度自适应。确实第一次做这个布局，而且只是在纸上谈，具体可能遇到的问题可能没有想到，而且考官总是问ie6下可行么，感觉答得不是很好，回来做了一下，还挺简单的，就是以前没做过……
流体布局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>Special Layout</title>
6 <style type="text/css">
7 html, body {
8 width: 100%;
9 height: 100%;
10 margin: 0;
11 padding: 0;
12 }
13 body {
14 position: relative;
15 }
16 #wrapper {
17 position: relative;
18 top: 10%;
19 margin: 0 auto;
20 width: 80%;
21 min-width: 400px;
22 height: 80%;
23 background: #000;
24 }
25 #left {
26 float: left;
27 position: relative;
28 width: 200px;
29 height: 100%;
30 margin-right: -200px;
31 background: blue;
32 overflow: hidden;
33 }
34 #right {
35 position: relative;
36 width: auto;
37 height: 100%;
38 background: green;
39 margin-left: 200px;
40 overflow: hidden;
41 }
42 #lefttop {
43 width: 100%;
44 height: 100px;
45 background: red;
46 }
47 #leftbottom {
48 width: 100%;
49 background: #0ff;
50 height: auto !important;
51 height: 9999px;
52 }
53 #left>#leftbottom {
54 position: absolute;
55 top: 100px;
56 bottom: 0;
57 }
58 #righttop {
59 width: 100%;
60 height: 100px;
61 background: #f0f;
62 }
63 #rightbottom {
64 width: 100%;
65 background: #ff0;
66 height: auto !important;
67 height: 9999px;
68 }
69 #right>#rightbottom {
70 position: absolute;;
71 top: 100px;
72 bottom: 0;
73 }
74 </style>
75 </head>
76 <body>
77 <div id="wrapper">
78 <div id="left">
79 <div id="lefttop">lefttop</div>
80 <div id="leftbottom">leftbottom</div>
81 </div>
82 <div id="right">
83 <div id="righttop">righttop</div>
84 <div id="rightbottom">rightbottom</div>
85 </div>
86 </div>
87 </body>
88 </html>
89
