CSS Calc替代

Question

我正在尝试使用CSS和没有jquery动态地更改div的宽度。 以下代码将

/* 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浏览器吗？

Answer 1

几乎总是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的博客中找到了这篇文章，他还展示了框大小作为简单calc（）表达式的一种可能选择：（粗体是我的）

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

注意： 以上技术确实与相应的calc（）语句看起来相同。虽然有区别。使用calc（）规则时，内容div的宽度值实际为100% - width of fixed div，但是使用上述技术，内容div的实际宽度为全100％宽度，但 外观 为“填满”剩余宽度。（这可能足以满足大多数人的需求）

也就是说，如果内容div的宽度实际上 是很重要的 ，100% - fixed div width 那么可以使用另一种技术-
利用块格式化上下文

1）浮动固定宽度div

2）在内容div上设置overflow:hidden或overflow:auto