<p class="sycode"> 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 > 124124 < div class ="RightBorder" ></ div > 125 </ div > 126 </ div > 127 </ div > 128 </ body > 129 </ html > </p>
css + div 实现左右div区域高度自动适应
立即学习“前端免费学习笔记（深入）”；
引自：http://www.cnblogs.com/guolichun/archive/2008/04/25/1171179.html
