CSS Calc另类

Question

我试图使用CSS动态更改div的宽度,而不是jquery.以下代码适用于以下浏览器: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的博客中发现了这篇文章,他还展示了box-sizing作为简单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)设置overflow:hidden或overflow:auto在内容div上

演示

Answer 2

只需在计算结果出现之前进行回退.

width: 98%;               /* fallback for browsers without support for calc() */
width: calc(100% - 1em);

在此处查看更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 3

用这个

    .content
{
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 500px;
    margin-right: -500px;
}