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 {&nbsp; width: calc(100% - 300px);}做这个：.sideBar {&nbsp; &nbsp; &nbsp;position: absolute;&nbsp;&nbsp; &nbsp; &nbsp;top:0;&nbsp; &nbsp; &nbsp;left:0;&nbsp; &nbsp; &nbsp;width: 300px;}.content {&nbsp; &nbsp; padding-left: 300px;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; -moz-box-sizing: border-box;&nbsp; &nbsp; box-sizing: border-box;}* {&nbsp; margin: 0;&nbsp; padding: 0;}html,body,div {&nbsp; height: 100%;}.sideBar {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; width: 300px;&nbsp; background: orange;}.content {&nbsp; padding-left: 300px;&nbsp; width: 100%;&nbsp; -moz-box-sizing: border-box;&nbsp; box-sizing: border-box;&nbsp; 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）浮动固定宽度div2）在内容div上设置overflow:hidden或overflow:auto

Answer 2

用％或px更改#menuLog宽度，您将看到魔术。甚至适用于<2.3的所有设备*{ -moz-box-sizing: border-box;&nbsp; &nbsp; -webkit-box-sizing: border-box;&nbsp; &nbsp; box-sizing: border-box;}#menuLog{&nbsp; width:30%;&nbsp; /*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">&nbsp; <div inline-log="1">&nbsp; &nbsp; <div inline-log="1.1">&nbsp; &nbsp; &nbsp; One&nbsp; &nbsp; </div>&nbsp; </div><div inline-log="2">&nbsp; &nbsp; &nbsp;<div inline-log="2.1">&nbsp; &nbsp; &nbsp; Two&nbsp; &nbsp; &nbsp;</div>&nbsp; </div></div>