CSS Calc替代

Question

我正在尝试使用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);我还可以支持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

Answer 2

用％或px更改#menuLog宽度，您将看到魔术。甚至适用于<2.3的所有设备

*{

-moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}

#menuLog{

  width:30%;

  /*width:300px;*/

height: 60px;

padding: 5px;

background-color: #ddd;

}

#menuLog > div[inline-log="1"]{

display: inline-block;

vertical-align: top;

width: 100%;

height: 100%;

margin-right: -60px;

}

#menuLog > div[inline-log="1"] > div[inline-log="1.1"]{

margin-right: 60px;

height: 100%;

background-color: red;

}

#menuLog > div[inline-log="2"]{

display: inline-block;

vertical-align: top;

width: 60px;

height: 100%;

}

#menuLog > div[inline-log="2"] > div[inline-log="2.1"]{

display: inline-block;

vertical-align: top;

width: 55px;

height: 100%;

background-color: yellow;

margin-left:5px;

}

<div id="menuLog">

  <div inline-log="1">

    <div inline-log="1.1">

      One

    </div>

  </div><div inline-log="2">

     <div inline-log="2.1">

      Two

     </div>

  </div>

</div>