1 2 3 4 div + css左右高度自适应测试 5 6 7 8 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 102 103 104 105 test 106 test 107 108 109 test 110 test 111 test 112 test 113 test 114 hi.baidu.com/ 115 test 116 test 117 test 118 test 119 test 120 121 122 123 124 125 126 127 128 129

css + div 实现左右div区域高度自动适应
引自：http://www.cnblogs.com/guolichun/archive/2008/04/25/1171179.html