Setting element height/width to a combination of percent and pixel values

Question

I'm using the jQuery .css() method to set the height and width of an element to 30% of the container div element minus 10 pixels. How would I do this?

Here is my attempt:

$('div').css({
    height:'30%-5px';
});

Answer 1

With CSS3, you can use calc():

$('div').css({
    height: 'calc(30%-5px)';
});

Note that this has limited browser support. Considering finding a value that can be used as a fallback (such as height: 29%).

Answer 2

I think you need to use the CSS calc() function, eg:

$('div').css({
    height: 'calc(30% - 5px)';
});