CSS 經典案例 兩列布局 左固定 右自適應 高度自適應

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title >兩列高度自適應 </ title >
< style  type ="text/css" >
<!--
* { margin : 0 ; padding : 0 ; }
#top { background : #dcdcdc ; height : 30px ; }
#main { overflow : hidden ; }
.sidebar { float : left ; width : 150px ; background : #ff0000 ; }
.content { background : #333333 ; overflow : hidden ; _float : left ; /* 相容IE6 */ }
.row { margin-bottom : -10000px ; padding-bottom : 10000px ; /* 內外補丁是關鍵 */ }
#footer { clear : both ; height : 30px ; background : #0000ff ; }
-->
</ style >
</ head >
< body >
< div  id ="container" >

< div  id ="top" ></ div >

< div  id ="main" >

< div  class ="sidebar row" >
我在左邊 < br  /> 
我在左邊 < br  /> 
我在左邊 < br  />
我在左邊 < br  /> 
我在左邊 < br  /> 
我在左邊 < br  /> 
我在左邊 < br  />
我在左邊 < br  />
我在左邊 < br  /> 
我在左邊 < br  />
我在左邊 < br  /> 
我在左邊 < br  />
我在左邊 < br  />
我在左邊 < br  />
我在左邊 < br  />
我在左邊 < br  /> 
我在左邊 < br  />

</ div >

< div  class ="content row" >
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />
我在本文 < br  />

< span  style ="float:right; font-size:0; position:relative; " > &nbsp; </ span >  <!-- 為了萬惡的ie6 -->

</ div >

</ div >

< div  id ="footer" ></ div >

</ div >
</ body >
</ html >