对复杂的标题表示歉意。这是我的小提琴:
http://jsfiddle.net/PTSkR/152/
如果将结果窗格拖得更宽,您可以看到蓝色区域跳起来。它们应该总是在那里,填充侧边栏(宽度 275px)没有的任何区域。我尝试使用这个:
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%;}
操作数之间需要有空格,如下所示:
width: calc(100% - 275px);
看看这个。在“示例”的正上方有以下注释:
注意: + 和 - 运算符必须始终被空格包围。例如, calc(50% -8px) 的操作数将被解析为百分比后跟一个负长度,这是一个无效的表达式,而 calc(50% - 8px) 的操作数是一个百分比后跟一个负号和一个长度。 * 和 / 运算符不需要空格,但为了一致性而添加空格是允许的,并且推荐。