{"id":7559,"date":"2019-11-01T21:51:53","date_gmt":"2019-11-01T21:51:53","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7559"},"modified":"2019-11-01T21:52:34","modified_gmt":"2019-11-01T21:52:34","slug":"css-calc-you-little-beauty","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/css-calc-you-little-beauty\/","title":{"rendered":"CSS calc, you little beauty"},"content":{"rendered":"<p>When you have something like a React\/material-ui appbar and maybe toolbars these would usually by set to a pixel height which is great, until we want to then expand a component beneath them and have it fill the available space ?<\/p>\n<p>CSS <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/calc\" rel=\"noopener noreferrer\" target=\"_blank\">calc()<\/a> is here to save the day.<\/p>\n<p>Here&#8217;s an example style in material-ui style code. In this code our appbar and toolbar&#8217;s combined height is 123px and we want the next component to fill the &#8220;container&#8221;. The following therefore calculates the available space by subtracting 123px from whatever 100% is.<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nconst styles = (_theme: Theme) =&gt; ({\r\n  container: {\r\n    width: '100%',\r\n    height: 'calc(100% - 123px)'\r\n  },\r\n});\r\n<\/pre>\n<p>Obviously we need to wrap our parent component in the <em>withStyles<\/em> function, i.e.<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nexport withStyles(styles)(MyComponent);\r\n<\/pre>\n<p>then in the render method<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nconst { classes } = this.props as any;\r\n\/\/ ...\r\n&lt;div className={classes.container}&gt;\r\n\/\/ component to fill this space\r\n&lt;\/div&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>When you have something like a React\/material-ui appbar and maybe toolbars these would usually by set to a pixel height which is great, until we want to then expand a component beneath them and have it fill the available space ? CSS calc() is here to save the day. Here&#8217;s an example style in material-ui [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[43],"tags":[],"class_list":["post-7559","post","type-post","status-publish","format-standard","hentry","category-css"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7559"}],"version-history":[{"count":2,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7559\/revisions"}],"predecessor-version":[{"id":7564,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7559\/revisions\/7564"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}