CSS Calc替代

几乎总是

box-sizing: border-box

calc(100% - 500px)

例如：

如果我有以下标记：

<div >sideBar</div><div >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 >sideBar</div><div >content</div>

PS： 我不会在IE 5.5（hahahaha）中工作，但它将在IE8+，所有移动设备和所有现代浏览器（caniuse）中工作

我刚刚从Paul Irish的博客中找到了这篇文章，他还展示了框大小作为简单calc（）表达式的一种可能选择：（粗体是我的）

边框可以很好地解决边界框问题，这是我最喜欢的用例之一。我可能想用50％或20％的列划分网格，但想通过px或em添加填充。
没有CSS即将发布的calc（），这是不可能的……除非您使用border-box 。

注意： 以上技术确实与相应的calc（）语句看起来相同。虽然有区别。使用calc（）规则时，内容div的宽度值实际为

100% - width offixed div

也就是说，如果内容div的宽度实际上 是很重要的 ，

100% - fixed div width

1）浮动固定宽度div

2）在内容div上设置

overflow:hidden

overflow:auto