DIV+CSS实现两栏式高度自适应布局

DIV+CSS实现两栏式高度自适应布局

　　DIV+CSS实现两栏式高度自适应布局
　　
　　布局及样式如下：
　　
　　.wrap{overflow:hidden;}
　　
　　.left{width:200px;background:#f60;float:left;padding-bottom:10000px;margin-bottom:-10000px;line-height:50px}
　　
　　.right{width:600px;float:right;padding-bottom:10000px;margin-bottom:-10000px;background:#000}
　　
　　<divclass="wrap">
　　
　　<divclass="left"></div>
　　
　　<divclass="right"></div>
　　
　　</div>
　　
　　实现原理：
　　
　　块元素必须包含在一个容器里。
　　
　　应用overflow:hidden到容器里的元素。
　　
　　应用padding-bottom（足够大的值）到列的块元素。
　　
　　应用margin-bottom（足够大的值）到列的块元素。
　　
　　padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。