22

为复杂的标题道歉。这是我的小提琴：

http://jsfiddle.net/PTSkR/152/

如果将结果窗格拖得更宽，您可以看到蓝色区域跳起来。他们应该总是在那里，填充侧边栏（宽度 275 像素）没有的任何区域。我试着用这个：

width: calc(100%-275px);

但它似乎并没有起到作用。知道如何让这个按预期工作吗？

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

1 回答 1

42

操作数之间需要有空格，如下所示：

width: calc(100% - 275px);

看看这个。在“示例”的正上方，有以下注释：

注意： + 和 - 运算符必须始终被空格包围。例如 calc(50% -8px) 的操作数将被解析为百分比后跟负长度，无效表达式，而 calc(50% - 8px) 的操作数是百分比后跟减号和长度. * 和 / 运算符不需要空格，但允许并建议添加空格以保持一致性。
于 2013-07-13T03:27:28.713 回答