CSS Calc替代(CSS Calc alternative)

CSS Calc替代(CSS Calc alternative)

我试图用CSS动态地改变div的宽度，而不是jquery。 以下代码将在以下浏览器中运行： http : ///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浏览器吗？

I am trying to dynamicly change the width of a div using CSS and no jquery. The following code will work in the following browsers: http:///calc

/* Firefox */ width: -moz-calc(100% - 500px); /* WebKit */ width: -webkit-calc(100% - 500px); /* Opera */ width: -o-calc(100% - 500px); /* Standard */ width: calc(100% - 500px);

I want also support IE 5.5 and higher, i found the following: expression. Is this the correct usage:

/* IE-OLD */ width: expression(100% - 500px);

Can I also support Opera and the Android browser?

最满意答案

几乎总是box-sizing: border-box可以替换用于布局的calc(100% - 500px)等calc规则。

例如：

如果我有以下标记：

<div class="sideBar">sideBar</div> <div class="content">content</div>

而不是这样做：（假设侧边栏宽00像素）

.content { width: calc(100% - 00px); }

做这个：

.sideBar { position: absolute; top:0; left:0; width: 00px; } .content { padding-left: 00px; 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: 00px;
  background: orange;
}
.content {
  padding-left: 00px;
  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 ） 
 
 宽度演示 
 
 高度演示 
 
 我刚刚从保罗·爱尔兰的博客中发现了这篇文章 ，他也展示了一个简单的calc（）表达式的可能的替代方法：（粗体是我的） 
 
 
 
 我最喜欢的使用框之一是边框解决方案很好。 我可能想用50％或20％的列分割我的网格，但是想要通过px或em添加填充。 没有CSS的即将到来的calc（）这是不可能的，除非你使用边框 。 
 
 
 注意：上述技术确实与相应的calc（）语句一样。 有一个区别。 当使用calc（）规则时，内容div的宽度值实际上是100% - width of fixed div ，但是使用上述技术，内容div的实际宽度是完整的100％宽度，但它具有“填满”剩余宽度的外观 。 （这可能足够好，大多数人需要这里） 
 
 也就是说，如果重要的是内容div的宽度实际上是100% - fixed div width那么可以使用不同的技术 - 这种技术可以使用块格式化上下文（见这里和这里的gory细节）： 
 
 1）浮动固定宽度div 
 
 2）设置overflow:hidden或overflow:auto内容div上的overflow:auto 
 
 演示 
Almost always box-sizing: border-box can replace a calc rule such as calc(100% - 500px) used for layout.
 
For example:
 
If I have the following markup:
 
<div class="sideBar">sideBar</div>
<div class="content">content</div>
 
Instead of doing this: (Assuming that the sidebar is 00px wide)
 
.content {
  width: calc(100% - 00px);
}
 
Do this:
 
.sideBar {
     position: absolute; 
     top:0;
     left:0;
     width: 00px;
}
.content {
    padding-left: 00px;
    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: 00px;
  background: orange;
}
.content {
  padding-left: 00px;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: wheat;
} 
  
<div class="sideBar">sideBar</div>
<div class="content">content</div> 
  
 
 
PS: I won't work in IE 5.5 (hahahaha) , but it will work in IE8+ , all mobile, and all modern browsers (caniuse)
 
Width Demo
 
Height Demo
 
I just found this post from Paul Irish's blog where he also shows off box-sizing as a possible alternative for simple calc() expressi: (bold is mine)
 
 
 
One of my favorite use-cases that border-box solves well is columns. I might want to divide up my grid with 50% or 20% columns, but want to add padding via px or em. Without CSS’s upcoming calc() this is impossible… unless you use border-box.
 
 
B: The above technique does indeed look the same as would a corresponding calc() statement. There is a difference though. When using a calc() rule the value of the width of the content div will actually be 100% - width of fixed div, however with the above technique, the actual width of the content div is the full 100% width, yet it has the appearance of 'filling up' the remaining width. (which is probably good enough for want most people need here)
 
That said, if it is important that the content div's width is actually 100% - fixed div width then a different technique - which makes use of block formatting contexts - may be used (see here and here for the gory details):
 
1) float the fixed width div
 
2) set overflow:hidden or overflow:auto on the content div
 
Demo