在过去的几个小时里，我一直在搜索网络以找到解决这个问题的方法，但是没有找到，所以我来到这里。
我需要div 的宽度为100% 减去 left div 的宽度。
这样左边的div 宽度保持不变（390px），而另一个div 会根据分辨率自动调整大小。我已经找到了在两侧有固定宽度div 的解决方案，但是就是无法想出这个解决方法。
5个回答
10
简单的解决方案：
<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;
}
这将允许您拥有固定的侧边栏宽度和全宽内容区域，我已经使用它很多次，它的效果非常好。
- brenjt
2
HTML中不能有两个ID。 - Brett Merrifield
3当然可以，你不能有两个相同的ID。 - brenjt
9
在CSS中，目前不支持这种类型的计算（至少在Chromium 12/Ubuntu 11.04中不支持），但是CSS3中定义了一个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()演示获得的，以下是代码：
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;
}
如果有人想在他们的平台上运行上面的测试，并提供结果或将其编辑到此答案中，那将非常感激。
正如clairesuzy在评论中指出的：
看一下caniuse，如果你使用
width: -moz-calc()，它确实可以在Firefox中工作，但仅限于此；）
事实上，在Firefox 5（Ubuntu 11.04）中它确实有效（其他供应商前缀似乎对Opera或Webkit没有任何作用，遗憾）：修订后的供应商前缀演示。
参考：
- David Thomas
2
所以，十年过去了，我认为你可以更新一下，说calc()是有效的，并且可能是回答问题标题的最佳选择。 - dlamblin
4
<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创建为一个新的块级格式化上下文（可以使用overflow: hidden实现），这样它就会占据剩余的空间。
示例链接
- clairesuzy
0
也许这与问题不直接相关，但我曾经遇到过类似的问题，需要在列表中排列项目。每个项目的固定宽度都在右侧。我用以下方法解决了这个问题。思路是通过将正数的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;
}
- Vladius
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接