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
<\/div>\n<\/div>\nBrowser support:<\/strong><\/h3>\nIt is supported by almost all modern browsers. On desktop version it supports IE 9+, Safari 6+.
\nFor reference you can use the following link:
\nhttp:\/\/caniuse.com\/#search=calc%28%29<\/a><\/p>\nFor browsers that don’t support calc()<\/strong>, \u00a0use the following polyfill:
\nhttps:\/\/github.com\/closingtag\/calc-polyfill<\/p>\n","protected":false},"excerpt":{"rendered":"Working with CSS- calc() These days CSS has the ability to do some cool stuff like animations, gradients, transforms, creating sophisticated interfaces with flexible box layouts etc. In this blog we will learn how to use the calc() CSS function, which is very useful for calculation in CSS. How to use it: calc() allow us […]<\/p>\n","protected":false},"author":50,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":3,"footnotes":""},"categories":[1],"tags":[355,378],"class_list":["post-20395","post","type-post","status-publish","format-standard","hentry","category-technology","tag-css3","tag-html5"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
[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<\/div>\nBrowser support:<\/strong><\/h3>\nIt is supported by almost all modern browsers. On desktop version it supports IE 9+, Safari 6+.
\nFor reference you can use the following link:
\nhttp:\/\/caniuse.com\/#search=calc%28%29<\/a><\/p>\nFor browsers that don’t support calc()<\/strong>, \u00a0use the following polyfill:
\nhttps:\/\/github.com\/closingtag\/calc-polyfill<\/p>\n","protected":false},"excerpt":{"rendered":"Working with CSS- calc() These days CSS has the ability to do some cool stuff like animations, gradients, transforms, creating sophisticated interfaces with flexible box layouts etc. In this blog we will learn how to use the calc() CSS function, which is very useful for calculation in CSS. How to use it: calc() allow us […]<\/p>\n","protected":false},"author":50,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":3,"footnotes":""},"categories":[1],"tags":[355,378],"class_list":["post-20395","post","type-post","status-publish","format-standard","hentry","category-technology","tag-css3","tag-html5"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
<\/div>\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{ [\/css]<\/p>\n<\/div>\n It is supported by almost all modern browsers. On desktop version it supports IE 9+, Safari 6+. For browsers that don’t support calc()<\/strong>, \u00a0use the following polyfill: Working with CSS- calc() These days CSS has the ability to do some cool stuff like animations, gradients, transforms, creating sophisticated interfaces with flexible box layouts etc. In this blog we will learn how to use the calc() CSS function, which is very useful for calculation in CSS. How to use it: calc() allow us […]<\/p>\n","protected":false},"author":50,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":3,"footnotes":""},"categories":[1],"tags":[355,378],"class_list":["post-20395","post","type-post","status-publish","format-standard","hentry","category-technology","tag-css3","tag-html5"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
\n\theight:90%; \/*fallback*\/
\n\theight:calc(100% – 40px);
\n}<\/p>\nBrowser support:<\/strong><\/h3>\n
\nFor reference you can use the following link:
\nhttp:\/\/caniuse.com\/#search=calc%28%29<\/a><\/p>\n
\nhttps:\/\/github.com\/closingtag\/calc-polyfill<\/p>\n","protected":false},"excerpt":{"rendered":"