html - 如何强制流体 DIV 扩展到全部可用宽度？

Question

我的布局具有固定宽度的左侧边栏和右侧边栏，以及占据中间可用空间的流动主要内容区域，像这样，所有内容都带有 float:left --

#left-sidebar {width: 200px;}
#right-sidebar {width: 300px;}
#main-content {margin-left: 200px; margin-right: 300px}

如果我填充#main-content，一切都会按预期工作。

但是如果#main-content 的内容很少，它的宽度就会崩溃并且会影响我的布局。

我在#main-content 末尾使用了一个非常不优雅的添加

<div>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div>

并将其可见性设置为隐藏。

这样，它会扩展到全部可用宽度，但我希望能有一些不那么骇人听闻的东西。

(不用说，将#main-content 宽度或其中某些元素的宽度设置为 100% 并不是解决方案。)

Answer 1

您可以使用 CSS3 Calc将宽度设置为 100% 减去侧边栏的宽度:

/* Assuming 200px for each sidebar */

#main-content {
    width: calc(100% - 400px)
}

演示:http://jsfiddle.net/wDMfF/