How to use it:<\/strong><\/h3>\ncalc() allow us to use the mathematical formula within CSS with height, width and font-sizes etc. To measure we can use four maths operators add(+), subtract(-), multiply(*) and divide(\/).<\/p>\n
Syntax:<\/strong><\/h3>\n[css]<\/p>\n
\twidth:calc(100% \/ 4);\t<\/p>\n
[\/css]<\/p>\n
Uses of calc() function:<\/strong><\/h3>\n\n![\"sample\"](\"\/blog\/wp-ttn-blog\/uploads\/2015\/06\/sample.jpg\")
<\/div>\n\nSuppose there is content <div><\/span>\u00a0which is supposed to adjust height according to the height of the browser. Here is the tricky part of the problem\u00a0wherein the\u00a0content should be just below the header. We usually achieve it via plain old vanilla JavaScript or jQuery. But this can easily be achieved by using CSS calc() function.<\/p>\n[css]<\/p>\n
.content{
\n\theight:90%; \/*fallback*\/
\n\theight:calc(100% – 40px);
\n}<\/p>\n
[\/css]<\/p>\n<\/div>\n
[css]<\/p>\n
\twidth:calc(100% \/ 4);\t<\/p>\n
[\/css]<\/p>\n
Uses of calc() function:<\/strong><\/h3>\n\n<\/div>\n\nSuppose there is content <div><\/span>\u00a0which is supposed to adjust height according to the height of the browser. Here is the tricky part of the problem\u00a0wherein the\u00a0content should be just below the header. We usually achieve it via plain old vanilla JavaScript or jQuery. But this can easily be achieved by using CSS calc() function.<\/p>\n[css]<\/p>\n
.content{
\n\theight:90%; \/*fallback*\/
\n\theight:calc(100% – 40px);
\n}<\/p>\n
[\/css]<\/p>\n<\/div>\n
<\/div>\n\n
Suppose there is content <div><\/span>\u00a0which is supposed to adjust height according to the height of the browser. Here is the tricky part of the problem\u00a0wherein the\u00a0content should be just below the header. We usually achieve it via plain old vanilla JavaScript or jQuery. But this can easily be achieved by using CSS calc() function.<\/p>\n [css]<\/p>\n .content{ [\/css]<\/p>\n<\/div>\n
\n\theight:90%; \/*fallback*\/
\n\theight:calc(100% – 40px);
\n}<\/p>\n