calc() 100% + #px

Question

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.

Using the css3 calc() function I'm attempting to do height of the object @ 100% + 25px (height of 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.

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.

Is this even possible? Am I even making sense?!

Answer 1

I'm not 100% sure but the working draft describes that the operators on both sides of a calculation form a sub expression (of a single type).

Since you're combining a relative value (%) with a absolute value (px) it might not be able to complete the calculations.

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.