Html CSS：如何使用 calc(100% - 20px) 来填充除固定宽度元素以外的所有区域？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17626639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: How to use calc(100% - 20px) to get an area to fill up all area OTHER than that of a fixed-width element?
提问by RobVious
Apologies for the convoluted title. Here's my fiddle:
为令人费解的标题道歉。这是我的小提琴：
http://jsfiddle.net/PTSkR/152/
http://jsfiddle.net/PTSkR/152/
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:
如果将结果窗格向外拖得更宽，您可以看到蓝色区域向上跳。它们应该总是在那里，填充侧边栏（宽度 275 像素）没有的任何区域。我试着用这个：
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:
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:
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%;}
回答by kalley
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.
注意：+ 和 - 运算符必须始终用空格包围。例如，calc(50% -8px) 的操作数将被解析为一个百分比，后跟一个负长度，一个无效的表达式，而 calc(50% - 8px) 的操作数是一个百分比，后跟一个减号和一个长度. * 和 / 运算符不需要空格，但为了一致性而添加它是允许的，建议使用。
