如何获得2列的布局，其中一列的宽度固定，另一列的宽度是剩余的？

Question

我有一个2列布局。左栏的宽度为300px。我希望右栏占据剩余监视空间的全部宽度。但我无法弄清楚这个px和％的混合体是如何工作的？有人有主意吗？

我想我可以使用js来获取用户的视口宽度并动态地添加一些内联样式，但然后我将不得不在每个窗口调整大小等。所以我宁愿有一个纯粹的CSS解决方案。

Answer 1

我宁愿thirtydot's answer：

Demo fiddle。

最低CSS要求：

#sideBar { 
    width: 300px; 
    float: left; 
} 
#mainContent { 
    overflow: hidden; 
} 

Answer 2

这是一个可行的方法给你：http://jsfiddle.net/mqchen/RDLMm/

Answer 3

一种方法是到左边浮动的固定宽度列，然后用保证金来模拟你的另一列。事情是这样的：

<div id="sidebar"> 
    <!-- ... --> 
</div> 
<div id="content"> 
    <!-- ... --> 
</div> 

和一些CSS：

#sidebar { 
    float: left; 
    width: 300px; 
} 
#content { 
    margin-left: 300px; 
} 

一个<div>其默认display:block自然会占用所有可用的宽度。 300px的左边距为固定宽度列留出空间。

例子：http://jsfiddle.net/ambiguous/wdsbu/