CSS计算替代方案
我正在尝试使用CSS而不是jquery来动态地改变div的宽度。以下代码将在以下浏览器中运行：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);我还能支持和安卓浏览器吗？
回答 6
Stack Overflow用户
发布于 2013-09-02 18:03:39
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:我不能在IE5.5中工作(哈哈哈)，但它可以在IE8+，所有移动设备和所有现代浏览器(caniuse)中工作
我刚刚在保罗·爱尔兰的博客中发现了this post，他还展示了框大小作为简单calc()表达式的可能替代方案：(我的是粗体)
我最喜欢的边界框解决得很好的用例之一是列。我可能想用50%或20%的列划分我的网格，但想通过px或em添加填充。没有CSS即将到来的calc()这是不可能的…除非您使用边框。
calc NB：上面的技术看起来确实和相应的()语句是一样的。不过，这是有区别的。当使用calc()规则时，内容div的宽度的值实际上是100% - width of fixed div，但是使用上面的技术，内容div的实际宽度是完整的100%宽度，但它看起来像是“填充”了剩余的宽度。(这可能足以满足大多数人在这里的需求)
也就是说，如果content div的宽度实际上是100% - fixed div width是很重要的，那么可以使用一种不同的技术--利用块格式化上下文--(参见here和here了解更多细节)：
1)浮动固定宽度的div
2)在content div上设置overflow:hidden或overflow:auto
Stack Overflow用户
发布于 2013-09-02 17:54:27
在计算完成之前，先回退一步。
width: 98%; /* fallback for browsers without support for calc() */
width: calc(100% - 1em);请在此处查看更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/calc
Stack Overflow用户
发布于 2013-11-12 14:49:02
使用此
.content
{
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-right: 500px;
margin-right: -500px;
}https://stackoverflow.com/questions/16034397
复制相似问题