将 div 宽度设置为 100% 减去一定量的 px

Question

过去几个小时一直在网上搜索以找到解决方案，但找不到，所以我在这里。

我需要 div 的宽度为 100% 减去 left div 的宽度。

这样，其左侧的 div 保持相同的宽度 (390px)，但另一个 div 根据分辨率调整其大小。我找到了两侧都有固定宽度 div 的解决方案，但就是无法弄清楚。

Answer 1

简单的解决方案：

<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;
}

这将允许您拥有固定的侧边栏宽度和全宽内容区域。我已经使用过它很多次了，它就像一个魅力。

Answer 2

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;
}

(如果有人想在浏览器中运行上述测试他们的平台，并提供结果，或将其编辑到此答案中，这将非常表示赞赏。）

正如clairesuzy，在评论中：

[看看]caniuse它确实可以在 Firefox 中运行如果你使用 width: -moz-calc() 但仅此而已;)

事实上，在 Firefox 5 (Ubuntu 11.04) 中它确实可以工作（其他供应商前缀似乎对 Opera 或不过，遗憾的是 Webkit）：修订后的供应商前缀演示。

参考：

• CSS3 值和单位。

Answer 3

<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 中创建一个新的块格式上下文（溢出：隐藏是一种方法），这样它将占用剩余空间

小提琴示例

Answer 4

现在在其他 FireFox 浏览器中确实没有办法直接使用 CSS 来做到这一点（请参阅 MDN 文档）。您可以使用 javascript 来执行相同的操作，但我建议重新考虑您的布局。

编辑：实际上 IE 9 也可以处理它，请参阅 MSDN 文档。 IE 好用吗？

Answer 5

也许这与问题没有直接关系，但我在排列列表中的项目时遇到了类似的问题。固定宽度元素位于每个项目的右侧。我已经设法用以下方法解决了这个问题。这个想法是平衡正的 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;
}