Jquery CSS calc () function

Question

I came across this CSS LINK page; I could not like the idea of ​​this in order to calculate the result of different units ... however I tried this:

$('selector').css({'width':'calc(100%-20px)'});

but it won’t work ... does anyone have any idea how this works, or why it doesn't work?

Answer 1

jQuery does not support value calc(), and not one of the current browsers.

See comparison here: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29

In your example, yo can just use the fields for the inner element:

<div class="parent"><div class="elem"></div></div>

.parent{
    width:100%;
    background:green;
}
.elem{
    margin: 0 10px;
    background:blue;
}

Thus, it .elemwill be 100% - 20 pixels wide.

Answer 2

jQuery calc(). :

• $(".content-section").css('width','calc('+contentSectionWidth+'% - 15px)');

• $(".content-section").css('width','calc(100% - 15px)');

Answer 3

CSS3 . . , . , CSS3, .

, CSS Level 3 Selectors , ( ). PR CR , .

" CSS3" - , , . , , calc(), , , . , CSS 2.1.

, , 100%-20px, , .

Answer 4

verma .

, . calc , .

MDN:

+ - . , calc (50% -8px) , , , calc (50% - 8px) , , , calc (8px + -50%) , . * / , .