CSS calc() 100% + #px
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11950518/
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
calc() 100% + #px
提问by user1597713
I'm trying to achieve something I'm not even too sure is possible here.
我正在努力实现一些我什至不太确定在这里是否可行的东西。
I'm trying to place a particular drop shadow PNG image under the nav for my site. However I also want to reuse this ability for any object I wish on the site, be it an image, a div or button. Basically use the same shadow image for any object.
我正在尝试在我的网站的导航下放置一个特定的投影 PNG 图像。但是，我也想对网站上我希望的任何对象重复使用此功能，无论是图像、div 还是按钮。基本上对任何对象使用相同的阴影图像。
Using the css3 calc()function I'm attempting to do height of the object @ 100% + 25px (height of png).
使用 css3calc()函数，我试图将对象的高度设为 @ 100% + 25px（png 的高度）。
I have tried styling:
我试过造型：
height: -webkit-calc(100% + 25px);
height: -moz-calc(100% + 25px);
height: -o-calc(100% + 25px);
But from what I can gather in Firebug 100% + 25px is then the new 100% as this achieves nothing.
但是从我可以在 Firebug 中收集到的 100% + 25px 是新的 100%，因为这没有任何效果。
I also tried:
我也试过：
height: -webkit-calc(100% + 25px);
height: -moz-calc(100% + 25px);
height: -o-calc(100% + 25px);
background-position: 0 -moz-calc(100% + 25px);
But no joy here either.
但这里也没有快乐。
If I use calc(3em + 25px); it works no problem, but this isn't flexible enough to work on any object.
如果我使用 calc(3em + 25px); 它没有问题，但这不够灵活，无法处理任何对象。
Is this even possible? Am I even making sense?!
这甚至可能吗？我还有道理吗？！
采纳答案by Damien
I'm not 100% sure but the working draftdescribes that the operators on both sides of a calculation form a sub expression (of a single type).
我不是 100% 肯定，但工作草案描述了计算两侧的运算符形成子表达式（单一类型）。
Since you're combining a relative value (%) with a absolute value (px) it might not be able to complete the calculations.
由于您将相对值 (%) 与绝对值 (px) 结合使用，因此可能无法完成计算。
Update:I did a small test and it seems too work fine. Are you sure your selectors and positions in the html are correct? Check this Fiddle.
更新：我做了一个小测试，它似乎工作得很好。你确定你在 html 中的选择器和位置是正确的吗？检查这个Fiddle。
