css布局，左边固定尺寸，右边自适应

今天遇到这个问题，做一个左边固定尺寸，右边自适应网页布局，起初我是用js来记算控制又边的尺寸的

后来发现，js的加载慢一些，网页打开会抖动一下，解决这个问题我又不想用css3，怕兼容性不好

后面只用了css做了一下调整解决了这个问题，发现代更简单，兼容性也很好



html代码

<div id="main">

    <div id="left"></div>

    <div id="right"></div>

</div>

[CSS] 纯文本查看 复制代码

#main{
    overflow:hidden;  /* 让主体部份高度能自适应 */

}


#left{
	width:200px;
	float:left;  /* 左浮 */
}


#right{
	margin-left:200px;  /* 往左边挤出 左边div 的宽度 */
}

原理很简单

main主框架，用overflow：hidden, 让他子元浮即使浮动了高度也能自适应，

left左框架浮动后其实是没有占位置的，等于高度是0

right右框架宽度是没有做限制，默认是占了100%，挤出左框架的宽度，剩下的都是自已的宽度