CSS左列流体和右列固定宽度答案

【问题标题】：CSS Left Column fluid & Right Column fixed widthCSS左列流体和右列固定宽度
【发布时间】：2015-04-05 13:31:55
【问题描述】：

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

<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 然后将“左”替换为“右”。

这是我修改后的小提琴。

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

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

}

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

【问题讨论】：

标签： css

【解决方案1】：

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

http://jsfiddle.net/oLuzay16/

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

【讨论】：