{"id":8529,"date":"2020-08-26T19:35:18","date_gmt":"2020-08-26T19:35:18","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=8529"},"modified":"2020-08-26T21:11:48","modified_gmt":"2020-08-26T21:11:48","slug":"how-to-create-a-footer-using-css","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/how-to-create-a-footer-using-css\/","title":{"rendered":"How to create a footer using CSS"},"content":{"rendered":"<p>To create a footer, a div that sits at the bottom of your viewport, using the <em>position: &#8220;fixed&#8221;<\/em> CSS. <\/p>\n<p>For example here&#8217;s a snippet using material-ui&#8217;s createStyles function<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nfooter: {\r\n  position: &quot;fixed&quot;,\r\n  bottom: 0,\r\n  marginBottom: &quot;10px&quot;,\r\n},\r\n<\/pre>\n<p>This will display the element it&#8217;s assigned to at the bottom of the screen using the <em>fixed<\/em> and <em>bottom<\/em> attributes, just to give it a bit of space we&#8217;ll using <em>marginBottom<\/em> so it floats above the bottom of the screen.<\/p>\n<p>There&#8217;s a problem with the <em>fixed<\/em> position. It&#8217;s width is relative to the viewport, not relative to the parent. <\/p>\n<p>This mean&#8217;s in a situation where you might have a user interface where the screen is divided into two columns and you want the fixed div in the right most column, you&#8217;ll find the width will extend outside if the view.<\/p>\n<p>We&#8217;ll look at how to solve this, in the next post.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To create a footer, a div that sits at the bottom of your viewport, using the position: &#8220;fixed&#8221; CSS. For example here&#8217;s a snippet using material-ui&#8217;s createStyles function footer: { position: &quot;fixed&quot;, bottom: 0, marginBottom: &quot;10px&quot;, }, This will display the element it&#8217;s assigned to at the bottom of the screen using the fixed and [&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-8529","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\/8529","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=8529"}],"version-history":[{"count":3,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8529\/revisions"}],"predecessor-version":[{"id":8535,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8529\/revisions\/8535"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=8529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=8529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=8529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}