CSS+DIV 实现左右高度自适应

最新推荐文章于 2025-09-11 10:42:34 发布

weixin_30748995

最新推荐文章于 2025-09-11 10:42:34 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/jRoger/articles/1807566.html

本文介绍了一种使用CSS实现左右两个div区域高度自动适应的方法。通过特定的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
121 </ div >
122 < div class ="BottomBorder" >
123 < div class ="LeftBorder" ></ div >
124 < div class ="RightBorder" ></ div >
125 </ div >
126 </ div >
127 </ div >
128 </ body >
129 </ html >

css + div 实现左右div区域高度自动适应

引自：http://www.cnblogs.com/guolichun/archive/2008/04/25/1171179.html

转载于:https://www.cnblogs.com/jRoger/articles/1807566.html