关于利用css 实现右侧固定 左侧自适应布局的解决方案

最近遇到要求实现 右侧大小固定，左侧自适应的问题 ，根据亲身实现，现总结如下：

1.我们首先看一下左边固定 右边自适应的情况

html ：

<div id="left"> 我在左边</div>

<div id="right"> 我在右边</div>

css : #left{ border:1px solid #000;

float:left;

width:500px;

}

#right{

border:1px solid #f00;

margin-left:600px;

}

效果如下：


此时左边大小固定，右边水平自适应左边 中间距离适中为100px;

如果 用同样的方式进行右边固定左边自适应行吗？

css:#left{

border:solid 1px red;

}

#right{

width:500px;

border:solid 1px green;

float:right;

}

效果如下：


显然不行 ，这是因为 左边的在前面，会挡住后面的块，占据了一行，

但是如果两边都用了float呢？

效果如下：



显然是不行的，这样就不能实现自适应了。

那我们应该怎样做呢？

第一种方案：

html ：

<div id="right"> 我在右边</div>

<div id="left"> 我在左边</div>

css : #left{

border:1px solid #000;

margin-right:600px;

}

#right{

border:1px solid #f00;

float:right;

width:500px;}

把前后位置顺序颠倒，也可以实现右侧固定 左侧 自适应

第二种方案

利用css3 中的 cal()可以实现， 让浏览器自动计算 右边的大小；

html： <div id="left"> 我在左边</div>

<div id="right"> 我在右边</div>

css: #left{

border:1px solid #000;

width: calc(100% - 600px);

float: left;

}

#right{

float: right;

width: 500px;

border:1px solid #000;

}

效果如图：