将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中),但是calc()在CSS 3中定义了一个函数,它允许使用简单的数学函数来实现这种行为:

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 如果你使用它在Firefox中有效width: -moz-calc()但是就是这样;)

事实上,在Firefox 5(Ubuntu 11.04)中它确实有效(其他供应商前缀似乎没有为Opera或Webkit做任何事情;但遗憾的是):修改了供应商前缀的演示.

参考:

• CSS3值和单位.