CSS Calc替代 [英] CSS Calc alternative

问题描述

我试图动态改变一个div的宽度使用CSS和没有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浏览器吗？

解决方案

几乎总是 box-sizing：border-box 可以替换calc规则 calc（100％ - 500px）用于布局。

例如：

如果我有以下标记：

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

而不是这样做:(假设边栏宽度为300像素）

  .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< / div>< div class =content> content< / div>  

b
$ b

PS：我不能在IE 5.5（hahahaha）工作，但它将在IE8 +，所有移动和所有现代浏览器（ caniuse ）

宽度演示

高度演示

我只是从Paul Irish的博客中找到此帖 box-sizing作为简单calc（）表达式的一个可能的替代：（bold是我的）

-box解决很好的列。 I
可能想用50％或20％的列分割我的网格，但想要
通过px或em添加填充。 没有CSS的即将到来的calc（）这是
不可能...除非你使用边框。

NB：上面的技术看起来和相应的calc（）语句一样。有一个区别。当使用calc（）规则时，内容div的宽度值实际上是 100％ - 固定div的宽度，但是对于上述技术，内容div是完全100％宽度，但它具有剩余宽度的外观。 （这可能足够让大多数人需要这里）

也就是说，如果很重要，内容div的宽度实际上 100％ - 固定div宽度，那么可以使用不同的技术（使用块格式化上下文）（参见此处和此处了解详情）：

1）float the fixed width div

2）set overflow：hidden overflow：auto 上的内容div

演示

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://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);

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?

解决方案

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 300px wide)

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

Do this:

.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: 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() expressions: (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.

NB: 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

这篇关于CSS Calc替代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！