CSS Calc 替代品
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16034397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Calc alternative
提问by H3AP
I am trying to dynamicly change the width of a div using CSS and no jquery. The following code will workin the following browsers: http://caniuse.com/calc
我正在尝试使用 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);
I want also support IE 5.5 and higher, i found the following: expression. Is this the correct usage:
我还想支持 IE 5.5 及更高版本，我发现以下内容：表达式。这是正确的用法吗：
/* IE-OLD */
width: expression(100% - 500px);
Can I also support Opera and the Android browser?
我也可以支持 Opera 和 Android 浏览器吗？
回答by Danield
Almost always box-sizing: border-boxcan replace a calc rule such as calc(100% - 500px)used for layout.
几乎总是box-sizing: border-box可以替换calc(100% - 500px)用于布局的计算规则。
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)
而不是这样做：（假设侧边栏是 300px 宽）
.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)
PS：我不会在 IE 5.5 中工作（哈哈哈），但它可以在 IE8+、所有移动设备和所有现代浏览器（caniuse）中工作
I just found this postfrom Paul Irish's blog where he also shows off box-sizing as a possible alternative for simple calc() expressions: (bold is mine)
我刚刚从 Paul Irish 的博客中找到了这篇文章，他还展示了 box-sizing 作为简单 calc() 表达式的可能替代方案：（粗体是我的）
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.
我最喜欢的边框框解决的用例之一是列。我可能想用 50% 或 20% 的列划分我的网格，但想通过 px 或 em 添加填充。没有 CSS 即将推出的 calc() 这是不可能的……除非你使用 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 appearanceof 'filling up' the remaining width. (which is probably good enough for want most people need here)
注意：上述技术确实看起来与相应的 calc() 语句相同。不过还是有区别的。当使用计算值（）规则内容的div实际上将的宽度的值100% - width of fixed div，但是与上述技术中，内容div的实际宽度是完整的100％的宽度，但它具有外观的“填满”剩余宽度。（这可能足以满足大多数人在这里需要的需求）
That said, if it is importantthat the content div's width is actually 100% - fixed div widththen a different technique - which makes use of block formatting contexts - may be used (see hereand herefor the gory details):
也就是说，如果内容 div 的宽度实际上很重要，100% - fixed div width那么可以使用一种不同的技术 - 它利用块格式上下文 - 可以使用（请参阅此处和此处了解详细信息）：
1) float the fixed width div
1）浮动固定宽度的div
2) set overflow:hiddenor overflow:autoon the content div
2）设置overflow:hidden或overflow:auto放在内容div上
Demo
演示
回答by Tommy S?rensen
Just have a fallback before the calc will do the trick.
在 calc 起作用之前有一个后备。
width: 98%; /* fallback for browsers without support for calc() */
width: calc(100% - 1em);
See more here https://developer.mozilla.org/en-US/docs/Web/CSS/calc
在此处查看更多https://developer.mozilla.org/en-US/docs/Web/CSS/calc
回答by Mohamed Malik
use this
用这个
.content
{
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-right: 500px;
margin-right: -500px;
}
回答by bhiqa
Just spent the best part of 3 hours trying to workaround this for a specific case on andriod devices, couldnt get box sizing to work so i've linked it into my JS as a dirty workaround... no jQuery required though! :)
刚刚花了 3 个小时的大部分时间试图解决这个问题，以解决 Android 设备上的特定情况，无法使框大小调整工作，所以我已将它链接到我的 JS 中作为一种肮脏的解决方法......虽然不需要 jQuery！:)
Taken on working code on andriod 2.3.
采取在 andriod 2.3 上的工作代码。
<div class="sessionDiv" style="width:auto;">
<img> <!-- image to resize -->
</div>
<div class="sessionDiv" style="width:auto;">
<img> <!-- image to resize -->
</div>
JS with event listeners
带有事件侦听器的 JS
var orient =
{
orientation:window.orientation,
width: window.innerWidth,
check: function()
{
// if orientation does not match stored value, update
if(window.orientation !== this.orientation)
{
this.orientation = window.orientation; //set new orientation
this.width = window.innerWidth; //set new width
this.adjustIrritatingCSS(this.width); //change ui to current value
}
//if width does not match stored value, update
if(window.innerWidth !== this.width)
{
this.width = window.innerWidth; //set new width
this.adjustIrritatingCSS(this.width); //change ui to current value
}
},
adjustIrritatingCSS: function(screenWidth)
{
//disgusting workaround function
var titleBoxes = document.getElementsByClassName('sessionDiv');
var i = titleBoxes.length;
var sessWidth = screenWidth - 300; // calc(100% - 300px); -> equivalent
while(i--)
{
titleBoxes[i].style.width = String( sessWidth + "px");
//resize image in auto sized div
}
sessWidth = null; //clear width
titleBoxes = null; //clear nodelist
i = null; // clear index int
}
};
window.onload = function()
{
window.addEventListener('resize', function(){orient.check();});
//on resize, check our values for updates and if theres changes run functions
window.addEventListener('orientationchange', function(){orient.check();});
//on rotate, check our values for updates and if theres changes run functions
setInterval(function(){orient.check();}, 2000);
//occasionally check our values for updates and if theres changes run functions(just incase!!)
orient.adjustIrritatingCSS(orient.width);
//sets value on first run
};
Hope this helps anyone who cant get the box-sizing working! PS I have experienced problems with ios using this...
希望这可以帮助那些无法使盒子大小正常工作的人！PS我在使用这个时遇到了ios问题......
回答by Mareks Dunkurs
Change #menuLog width with % or px and you will see magic. Works with every device even < 2.3
用 % 或 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>回答by sam
I wanted to add the no-calc, no-border-box (i.e., CSS2) alternative.
我想添加 no-calc, no-border-box（即 CSS2）替代方案。
Normal-flow block elements initially have width: auto, which is effectively the width of the containing block minus the margin, border, and padding widths.
正常流块元素最初具有width: auto，它实际上是包含块的宽度减去边距、边框和填充宽度。
The example abovecan be done, without border-box, simply as
.content {
padding-left: 300px;
}
Similarly, with
同样，与
.content {
margin-left: 1px;
border-left: 1em solid;
padding-left: 1rem;
}
the effective width is 100% - 1px - 1em - 1rem.
有效宽度为100% - 1px - 1em - 1rem。
For absolutely positioned elements, height: autohas similar properties:
对于绝对定位的元素，height: auto有类似的属性：
.content {
position: absolute;
top: 0;
bottom: 0;
margin-bottom: 1px;
border-bottom: 1em solid;
padding-bottom: 1rem;
}
Here the effective height is 100% - 1px - 1em - 1rem.
这里的有效高度是100% - 1px - 1em - 1rem。
