CSS Left Column fluid & Right Column 固定宽度

Question

我找到了一个 fiddle ，似乎正在使用左列 FIXED 和右列 FLUID 宽度

http://jsfiddle.net/gpxeF/1742/

<div id=fixedWidth>
Fixed</div>
<div id=theRest>
    The rest of the space<br />The Rest?</div>

#fixedWidth{ 
    width: 200px;
    float: left;
    background: blue;
    position: absolute;
    height: 100%;
}
#theRest{
    background: green;
    padding-left: 200px;
}

但是当我试图通过使左列为流动的和右列为固定宽度来修改它时，问题就出现了。

我试图实现一个左栏是流动的，右栏是固定宽度的，但它不起作用。

我所做的是交换他们的 css，然后将“左”替换为“右”。

这是我修改过的 fiddle 。

http://jsfiddle.net/gpxeF/1744/

#fixedWidth{ 
    background: green;
    padding-right: 200px;

}

#theRest{
    width: 200px;
    float: right;
    background: blue;
    position: absolute;
    height: 100%;
}

Answer 1

由于您的第二个 div 是绝对定位的，因此需要添加 right:0 以使其固定在右侧，而不是 float:right。我编辑了你的 fiddle ，看看:

http://jsfiddle.net/oLuzay16/

我们还可以使用 css width:calc(100% - 200px); 使第一个 div 的宽度为容器的 100% 减去 200px 以占绝对定位的 div。 Calc 将适用于大多数较新的浏览器，请在此处查看完整列表:http://caniuse.com/#feat=calc