CSS CSS3 相当于 width:calc(100% - 10px)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16282302/
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
CSS3 equivalent to width:calc(100% - 10px)
提问by Ragen Dazs
I'm searching for an alternative to migrate my CSS - already working on FF and Chrome -, because QtWebKit it's not rendering some CSS3 feature yeat.
我正在寻找一种替代方案来迁移我的 CSS - 已经在 FF 和 Chrome 上工作 - 因为 QtWebKit 它没有呈现一些 CSS3 功能。
I have the following stuff:
我有以下东西：
.fit {
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
}
I want a class to fit all element as displayed in wireframe example.
我想要一个类来适合线框示例中显示的所有元素。
Note:Almost all CSS3 features can be perfect rendered, but as sayed before *-calc()have issues and can't find other solution eg. using margin-right, padding-rightetc.
注意：几乎所有的 CSS3 特性都可以完美呈现，但如前所述*-calc()有问题，无法找到其他解决方案，例如。使用margin-right，padding-right等等。
@EDIT:I created a fiddle http://jsfiddle.net/dj3hh/to show the expected behavior - You can resize fiddle and all margins respect 10pxfrom right. I want a new way to do this withou calc()
@EDIT：我创建了一个小提琴http://jsfiddle.net/dj3hh/来显示预期的行为 - 您可以10px从右侧调整小提琴的大小和所有边距。我想要一种新的方法来做到这一点calc()
回答by Timidfriendly
If you change the box model rendering to box-sizing: borderboxthen the padding will be included in the total width instead of being added to it.
With this example I am assuming you are adding the class to the wrapping elements.
如果将盒模型渲染更改为 ，box-sizing: borderbox则填充将包含在总宽度中而不是添加到其中。在这个例子中，我假设您将类添加到包装元素中。
.fit {
width:100%
padding-right:10px
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Browser support is very good; all modern browsers. Only you will need a polyfill for IE7 and under.
浏览器支持非常好；所有现代浏览器。只有你需要一个 IE7 及以下的 polyfill。
For more background info: paulirish.com/2012/box-sizing-border-box-ftw/
更多背景信息：paulirish.com/2012/box-sizing-border-box-ftw/
EDIT:
编辑：
This is a solution that I believe completely meets your brief, please see fiddle: http://jsfiddle.net/David_Knowles/UUPF2/
这是一个我认为完全符合您的要求的解决方案，请参阅小提琴：http: //jsfiddle.net/David_Knowles/UUPF2/
.fit {
width:100%
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
td {
padding-right: 10px;
}
回答by methodofaction
Put position: relativeon the parent element, then do...
穿上position: relative父元素，然后做...
.fit {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 10px;
}
