如何使用2列布局，其中一列具有固定宽度，另一列具有剩余宽度？

Question

我有2列布局。左列的宽度为300px。我希望右列占据剩余监视空间的整个宽度。但我无法弄清楚这种px和％的混合物是如何起作用的？有人有什么想法吗？

我想更糟糕的是，我可以使用js来获取用户的视口宽度并动态添加一些内联样式，但是我必须在每个窗口调整大小等时执行该操作。所以我更愿意使用纯css解决方案。< / p>

Answer 1

一种方法是将固定宽度列浮动到左侧，然后使用边距模拟其他列。像这样：

<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/

Answer 2

我更希望thirtydot's answer：

Demo fiddle

最低CSS要求：

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

Answer 3

以下是您可能采用的方法：http://jsfiddle.net/mqchen/RDLMm/