将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没有任何作用;但遗憾的是）：Revised vendor-prefixed demo。

参考：

• CSS3 Values and Units。

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

Example Fiddle

Answer 4

现在，在其他FireFox浏览器中，没有办法直接使用CSS（参见the MDN docs）。您可以使用javascript来执行相同操作，但我建议您重新考虑布局。

编辑：实际上IE 9也可以处理它，请参阅MSDN docs。是的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;
}