过去几个小时一直在网上寻找解决方案，但找不到它，所以我在这里。
我需要div 的宽度为100% 减去left div 的宽度。
因此，它左侧的div 保持相同的宽度（390 像素），但另一个div 会根据分辨率调整其大小。我找到了解决方案，它的两边都有固定宽度div，但就是想不通。
【问题讨论】：
也许这与问题没有直接关系，但我在列表中排列项目时遇到了类似的问题。固定宽度元素位于每个项目的右侧。我已经设法通过以下方法解决了这个问题。这个想法是平衡一个积极的padding-left 和一个消极的margin-left，而宽度设置为100%：
.item {
max-height: 40px;
}
.item-title {
display: inline-block;
height: 40px;
width: 100%;
margin-left: -70px;
padding-left: 65px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* This one should be fixed-width. */
.item-params {
width: 60px;
height: 40px;
float: right;
}
【讨论】：
CSS 目前不支持这种类型的计算（Chromium 12/Ubuntu 11.04 肯定不支持），但是 CSS 3 中定义了一个 calc() 函数，它允许这种行为，使用简单的数学功能：
section {
float: left;
margin: 1em; border: solid 1px;
width: calc(100%/3 - 2*1em - 2*1px);
}
p {
margin: calc(1rem - 2px) calc(1rem - 1px);
border: solid transparent; border-width: 2px 1px;
}
p:hover { border-color: yellow; }
（以上示例直接取自W3.org。）
我自己的（详尽的）测试显示：
+----------------+-------------------+
| Browser | Ubuntu 11.04 |
+----------------+-------------------+
| Chromium 12 | Fails |
| Firefox 5 | Fails |
| Opera 11.10 | Fails |
+----------------+-------------------+
以上结果是使用命名浏览器和css calc() demo得到的，其代码如下：
HTML：
<div id="box">This is the box.</div>
CSS：
#box {
width: calc(100% - 20%);
background-color: #f90;
font-weight: bold;
color: #fff;
line-height: 2em;
text-align: center;
margin: auto;
}
（如果有人想在他们平台上的浏览器中运行上述测试，并提供结果，或者将它们编辑到这个答案中，那将是 much 赞赏。）
正如 clairesuzy 所指出的，在 cmets 中：
[Take] 看看 caniuse 它在 Firefox 中确实可以工作如果你使用
width: -moz-calc()但仅此而已;)
事实上，在 Firefox 5 (Ubuntu 11.04) 中它确实有效（不过，其他供应商前缀似乎对 Opera 或 Webkit 没有任何作用；遗憾的是）：Revised vendor-prefixed demo。
参考：
【讨论】：
width: -moz-calc()，仅此而已;)
<div id="left">...</div>
<div id="content">...<br> more content</div>
#left {float: left; width: 390px; background: #f76922;}
#content {overflow: hidden; background: #eee;}
浮动左侧 div 并从右侧 div 中创建一个新的块格式化上下文（溢出：隐藏是这样做的一种方法），这样它将占用剩余空间
【讨论】：
简单的解决方案：
<div id="content">
<div class="padder">
</div><!-- .padder -->
</div>
<div id="sidebar">
<div class="padder">
</div><!-- .padder -->
</div>
CSS：
div#content {
float: right;
width: 100%;
}
div#content .padder {
margin-left: 330px;
padding: 0 30px 0 0;
}
div#sidebar {
float: left;
width: 300px;
margin-top: -30px;
padding-left: 30px;
margin-right: -330px;
}
这将允许您拥有固定的侧边栏宽度和全宽的内容区域。我已经用过很多次了，效果很好。
【讨论】：
目前在其他 FireFox 浏览器中确实没有直接使用 CSS 的方法（请参阅 the MDN docs）。你可以使用 javascript 来做同样的事情，但我建议重新考虑你的布局。
编辑：实际上 IE 9 也可以处理它，请参阅 MSDN docs。支持 IE 吗？
【讨论】：