我试图动态地改变一个div的宽度使用CSS和没有jquery。以下代码将在以下浏览器中工作：
http://caniuse.com/calc
/* Firefox */ width: -moz-calc(100% - 500px); /* WebKit */ width: -webkit-calc(100% - 500px); /* Opera */ width: -o-calc(100% - 500px); /* Standard */ width: calc(100% - 500px);
我也想支持IE 5.5和更高版本，我发现了以下：表达式。这是正确的用法：
/* IE-OLD */ width: expression(100% - 500px);
我还可以支持Opera和Android浏览器吗？
解决方法
几乎总是Box-sizing：border-Box可以替换用于布局的calc(100％ – 500px)等计算规则。
例如：
如果我有以下标记：
<div class="sideBar">sideBar</div> <div class="content">content</div>
而不是这样做:(假设边栏是300px宽)
.content {
width: calc(100% - 300px);
}
做这个：
.sideBar {
position: absolute;
top:0;
left:0;
width: 300px;
}
.content {
padding-left: 300px;
width: 100%;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
}
* {
margin: 0;
padding: 0;
}
html,body,div {
height: 100%;
}
.sideBar {
position: absolute;
top: 0;
left: 0;
width: 300px;
background: orange;
}
.content {
padding-left: 300px;
width: 100%;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
background: wheat;
}
<div class="sideBar">sideBar</div> <div class="content">content</div>
PS：我不会工作在IE 5.5(hahahaha)，但它将工作在IE8，所有移动，所有现代浏览器(caniuse)
我刚刚从Paul Irish的博客中发现了this post，他也展示了Box-sizing作为简单calc()表达式的一个可能的替代：(bold是我的)
One of my favorite use-cases that border-Box solves well is columns. I
might want to divide up my grid with 50% or 20% columns,but want to
add padding via px or em. Without CSS’s upcoming calc() this is
impossible… unless you use border-Box.
注意：上面的技术确实看起来和相应的calc()语句相同。有一个区别。当使用calc()规则时，内容div的宽度值实际上是100％ – 固定div的宽度，但是使用上述技术，内容div的实际宽度是完全100％的宽度， “填满”剩余宽度的外观。 (这可能是足够的，想要大多数人需要这里)
也就是说，如果重要的是内容div的宽度实际上是100％ – 固定的div宽度，那么可以使用一种不同的技术(使用块格式化上下文)(详见here和here)：
1)浮动固定宽度div
2)在内容div上设置overflow：hidden或overflow：auto
