css + div 实现左右div区域高度自动适应
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 <title>div + css左右高度自适应测试</title>
5 </head>
6 <body>
7 <div class="MainCenterDiv">
8 <style type="text/css">
9 /*左右高度自适应 Start*/
10 #Page
11 {
12 width: 960px;
13 margin: 0 auto;
14 overflow: hidden;
15 }
16 #header
17 {
18 background: #000;
19 }
20 #PageLeft
21 {
22 width: 198px;
23 float: left;
24 text-align: left;
25 border:solid 1px #ccc;
26 background-color:#eee;
27 }
28 #PageRight
29 {
30 width: 748px;
31 float: left;
32 text-align: left;
33 margin-left:10px;
34 border:solid 1px #ccc;
35 }
36 /* easy clearing */
37 #Page:after
38 {
39 content: '[DO NOT LEAVE IT IS NOT REAL]';
40 display: block;
41 height: 0;
42 clear: both;
43 visibility: hidden;
44 }
45 #Page
46 {
47 display: inline-block;
48 }
49 /*\*/
50 #Page
51 {
52 display: block;
53 }
54 /* end easy clearing */
55 /*\*/
56 #PageLeft, #PageRight
57 {
58 padding-bottom: 32767px !important;
59 margin-bottom: -32767px !important;
60 }
61 @media all and (min-width: 0px)
62 {
63 #PageLeft, #PageRight
64 {
65 padding-bottom: 0 !important;
66 margin-bottom: 0 !important;
67 }
68 #PageLeft:before, #PageRight:before
69 {
70 content: '[DO NOT LEAVE IT IS NOT REAL]';
71 display: block;
72 background: inherit;
73 padding-top: 32767px !important;
74 margin-bottom: -32767px !important;
75 height: 0;
76 }
77 }
78 /*补充底部border*/
79 div.BottomBorder{
80 width: 960px;
81 margin: 0 auto;
82 overflow: hidden;
83 height:1px;
84 clear:both;
85 }
86 div.BottomBorder .LeftBorder{
87 width: 200px;
88 float: left;
89 border-top:solid 1px #ccc;
90 }
91 div.BottomBorder .RightBorder{
92 width: 750px;
93 float: left;
94 margin-left:10px;
95 border-top:solid 1px #ccc;
96 }
97 /*左右高度自适应 End*/
98
99
100
101 </style>
102 <div id="Page">
103 <div id="PageLeft">
104
105 <p>test</p>
106 <p>test</p>
107 </div>
108 <div id="PageRight">
109 <p>test</p>
110 <p>test</p>
111 <p>test</p>
112 <p>test</p>
113 <p>test</p>
114 <p>hi.baidu.com/</p>
115 <p>test</p>
116 <p>test</p>
117 <p>test</p>
118 <p>test</p>
119 <p>test</p>
120 <p>test</p>
121 <p>test</p>
122 <p>test</p>
123 <p>test</p>
124 <p>test</p>
125 <p>test</p>
126 <p>test</p>
127 <p>test</p>
128 <p>test</p>
129 </div>
130 <div class="BottomBorder">
131 <div class="LeftBorder"></div>
132 <div class="RightBorder"></div>
133 </div>
134 </div>
135 </div>
136 </body>
137 </html>
138
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <title>div + css左右高度自适应测试</title>
5 </head>
6 <body>
7 <div class="MainCenterDiv">
8 <style type="text/css">
9 /*左右高度自适应 Start*/
10 #Page
11 {
12 width: 960px;
13 margin: 0 auto;
14 overflow: hidden;
15 }
16 #header
17 {
18 background: #000;
19 }
20 #PageLeft
21 {
22 width: 198px;
23 float: left;
24 text-align: left;
25 border:solid 1px #ccc;
26 background-color:#eee;
27 }
28 #PageRight
29 {
30 width: 748px;
31 float: left;
32 text-align: left;
33 margin-left:10px;
34 border:solid 1px #ccc;
35 }
36 /* easy clearing */
37 #Page:after
38 {
39 content: '[DO NOT LEAVE IT IS NOT REAL]';
40 display: block;
41 height: 0;
42 clear: both;
43 visibility: hidden;
44 }
45 #Page
46 {
47 display: inline-block;
48 }
49 /*\*/
50 #Page
51 {
52 display: block;
53 }
54 /* end easy clearing */
55 /*\*/
56 #PageLeft, #PageRight
57 {
58 padding-bottom: 32767px !important;
59 margin-bottom: -32767px !important;
60 }
61 @media all and (min-width: 0px)
62 {
63 #PageLeft, #PageRight
64 {
65 padding-bottom: 0 !important;
66 margin-bottom: 0 !important;
67 }
68 #PageLeft:before, #PageRight:before
69 {
70 content: '[DO NOT LEAVE IT IS NOT REAL]';
71 display: block;
72 background: inherit;
73 padding-top: 32767px !important;
74 margin-bottom: -32767px !important;
75 height: 0;
76 }
77 }
78 /*补充底部border*/
79 div.BottomBorder{
80 width: 960px;
81 margin: 0 auto;
82 overflow: hidden;
83 height:1px;
84 clear:both;
85 }
86 div.BottomBorder .LeftBorder{
87 width: 200px;
88 float: left;
89 border-top:solid 1px #ccc;
90 }
91 div.BottomBorder .RightBorder{
92 width: 750px;
93 float: left;
94 margin-left:10px;
95 border-top:solid 1px #ccc;
96 }
97 /*左右高度自适应 End*/
98
99
100
101 </style>
102 <div id="Page">
103 <div id="PageLeft">
104
105 <p>test</p>
106 <p>test</p>
107 </div>
108 <div id="PageRight">
109 <p>test</p>
110 <p>test</p>
111 <p>test</p>
112 <p>test</p>
113 <p>test</p>
114 <p>hi.baidu.com/</p>
115 <p>test</p>
116 <p>test</p>
117 <p>test</p>
118 <p>test</p>
119 <p>test</p>
120 <p>test</p>
121 <p>test</p>
122 <p>test</p>
123 <p>test</p>
124 <p>test</p>
125 <p>test</p>
126 <p>test</p>
127 <p>test</p>
128 <p>test</p>
129 </div>
130 <div class="BottomBorder">
131 <div class="LeftBorder"></div>
132 <div class="RightBorder"></div>
133 </div>
134 </div>
135 </div>
136 </body>
137 </html>
138
css + div 实现左右div区域高度自动适应
存档备用！
Ajax.jQuery.Java.
