{"id":22,"date":"2020-06-02T01:38:00","date_gmt":"2020-06-02T05:38:00","guid":{"rendered":"https:\/\/davidgrzyb.com\/?p=22"},"modified":"2021-02-13T15:24:52","modified_gmt":"2021-02-13T20:24:52","slug":"place-fixed-footer-at-bottom-page-tailwind","status":"publish","type":"post","link":"https:\/\/davidgrzyb.com\/place-fixed-footer-at-bottom-page-tailwind\/","title":{"rendered":"Pushing a Fixed Footer to the Bottom of a Page with Tailwind"},"content":{"rendered":"\n<p>Since I started using TailwindCSS for my projects (including <a href=\"https:\/\/davidgrzyb.com\/optimizing-tailwind-file-size-purgecss-laravel-mix\" rel=\"noreferrer noopener\" target=\"_blank\">this blog<\/a>), I&#8217;ve quickly picked up a bunch of neat tricks to quickly build layouts I previously would have trouble building. One of these tricks is using <code>.flex-grow<\/code> to push a fixed footer to the bottom of an otherwise empty page.<\/p>\n\n\n\n<p>Creating layouts and then realizing that when content wasn&#8217;t long enough, the footer would not be at the bottom of the browser window became really annoying. I couldn&#8217;t find a blog post detailing this properly, so here it is!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A Working Example<\/h2>\n\n\n\n<p>Here is a very simple, working demo of a footer that will stay at the bottom of the browser window. A detailed explanation of why this works is below.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"400\" data-theme-id=\"dark\" data-default-tab=\"html,result\" data-user=\"davidgrzyb\" data-slug-hash=\"wvMvNxR\" style=\"height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"wvMvNxR\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/davidgrzyb\/pen\/wvMvNxR\">\n  wvMvNxR<\/a> by David Grzyb (<a href=\"https:\/\/codepen.io\/davidgrzyb\">@davidgrzyb<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">How Does this Work?<\/h2>\n\n\n\n<p>The above example works by setting the wrapper div to be the height of the viewport. This allows the content section (the <code>&lt;main&gt;<\/code> block) to grow and fill the available space vertically.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.h-screen =&gt; height: 100vh<em>;<\/em>\n<\/pre>\n\n\n\n<p>Since <code>1vh<\/code> is equivalent to 1% of the viewport&#8217;s height, using <code>.h-screen<\/code> sets the height to 100% of the viewport&#8217;s height. But what happens if the content block is larger than what can fit on the viewport? In this case, the user will be able to scroll down and the footer will be at the bottom as they&#8217;d expect it to be. Check out the example below to see for yourself!<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"400\" data-theme-id=\"dark\" data-default-tab=\"html,result\" data-user=\"davidgrzyb\" data-slug-hash=\"gOPOyNx\" style=\"height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Fixed Footer at Bottom with filled Content TailwindCSS\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/davidgrzyb\/pen\/gOPOyNx\">\n  Fixed Footer at Bottom with filled Content TailwindCSS<\/a> by David Grzyb (<a href=\"https:\/\/codepen.io\/davidgrzyb\">@davidgrzyb<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p>In my examples I used <code>.flex-col<\/code> to force the elements within the wrapper div to stack vertically. If I hadn&#8217;t used this property, the <code>&lt;main&gt;<\/code> element would still fill up all of the space it could, but horizontally.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is flex-grow?<\/h2>\n\n\n\n<p>The flex-grow property is part of the flexbox module, and allows a flex item (in this case out <code>&lt;main&gt;<\/code> element) to grow if necessary or possible. The property accepts a value that is the proportion of the space it can take up, but for this example just using <code>.flex-grow<\/code> does the trick. To read up on flex-grow, here is a <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-grow\/\" rel=\"noreferrer noopener\" target=\"_blank\">great resource by CSS-Tricks<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.flex-grow =&gt; flex-grow: 1<em>;<\/em>\n<\/pre>\n\n\n\n<p>Using Tailwind&#8217;s <code>.flex-grow<\/code> property simply sets the flex-grow property to 1. This is enough to force the content element to take up the space available on the screen if there is not enough content to fill the entire viewport height.<\/p>\n\n\n\n<p>There it is! I recommend creating a simple page (or using the CodePen&#8217;s above) to remove and add different classes and see what the effects are &#8211; it&#8217;s the best way to get a hang of Tailwind!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A tutorial on using flex-grow with TailwindCSS to keep a fixed footer at the bottom of the viewport if the content on the page is not enough to fill the height of the viewport.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6],"tags":[],"_links":{"self":[{"href":"https:\/\/davidgrzyb.com\/wp-json\/wp\/v2\/posts\/22"}],"collection":[{"href":"https:\/\/davidgrzyb.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davidgrzyb.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davidgrzyb.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davidgrzyb.com\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":0,"href":"https:\/\/davidgrzyb.com\/wp-json\/wp\/v2\/posts\/22\/revisions"}],"wp:attachment":[{"href":"https:\/\/davidgrzyb.com\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davidgrzyb.com\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davidgrzyb.com\/wp-json\/wp\/v2\/tags?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}