CSS：如何使用calc（100％ - 20px）来获得一个区域来填充除固定宽度元素之外的所有区域？

Apologies for the convoluted title. Here's my fiddle:

为复杂的头衔道歉。这是我的小提琴:

If you drag the result pane out to be wider, you can see the blue areas jump up. They're supposed to always be up there, filling up whatever area the sidebar (width 275px) doesn't. I tried to use this:

如果将结果窗格向外拖动更宽,则可以看到蓝色区域向上跳跃。他们应该总是在那里,填补侧栏(宽度275px)没有的任何区域。我试着用这个:

width: calc(100%-275px);

But it doesn't seem to be doing the trick. Any idea how I can get this working as expected?

但它似乎没有做到这一点。知道我怎么能按预期工作吗?

HTML:

<div id="page-content" class="container-fluid page-host">
<div id="shell-row" class="row-fluid">
     <div id="sidebar" class="sidebar-nav span2">
     </div>
     <div id="browser-body" class="span10">
        <ul class="breadcrumb">
        </ul>
        <div id="container">
        </div>
     </div>       
</div>
</div>

CSS:

    #page-content {
    padding: 0px;
    margin-top: 0px;
    height: 100% !important;
}
#shell-row {
    height: 100%;
}
#sidebar {
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  background-color: #f0f0f0;
  height: 100%;
  width: 275px !important;
}

#browser-body {
  margin: 0px 0px 0px 0px !important;
    background-color: lightblue;
    width: calc(100%-275px);
}
#browser-body.span10 {
  margin: 0px 0px 0px 0px !important;
}
.breadcrumb {
  background-color: #d0f0f0;
  margin: 0px;
  width: 100%;
  border-radius: 0px;
  padding: 0px;
  height: 40px;
  line-height: 40px;
}
#container {
  padding: 10px;
  width: 100%;
}
html, body{height: 100%;}

1 个解决方案

#1

There needs to be space between the operand, like so:

操作数之间需要有空格,如下所示:

width: calc(100% - 275px);

Take a look at this. Right above "examples" the following note is there:

看看这个。在“示例”正上方,有以下注释:

Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

#1