title: TailwindCSS: How can I fix a header & footer to the screen while keeping scrollable content in between?
body: <p>I'm creating a React PWA for a client using Tailwind CSS and I want to achieve a layout in which there's a header fixed to the top of the screen and a navbar fixed to the bottom of the screen. In between I'll display scrollable content of dynamic size.</p>
  <p>I've been struggling with this problem for the most part of the day and I'm following the instructions on <a href="https://stackoverflow.com/questions/68138453/how-create-a-true-sticky-header-footer-using-tailwindcss-sticks-to-bottom-even">this answer</a> as well as <a href="https://play.tailwindcss.com/A5Hs7ZtGad" rel="nofollow noreferrer">the code it provided here</a>.</p>
  <p>I though I got it, as I implemented all the recommended classes in the relevant components and I got this result on my browser dev tools:</p>
  <p><a href="https://i.stack.imgur.com/LKAZz.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LKAZz.gif" alt="Apparent success in my dev tools" /></a></p>
  <p>However, I got curious and decided to open the page on my phone. This is the result there and, as you can see, neither of the desired elements are actually fixed to the screen:</p>
  <p><a href="https://i.stack.imgur.com/h0mVE.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h0mVE.gif" alt="It doesn't behave as expected" /></a></p>
  <p>At this point I'm completely lost. I've tried using <code>className={fixed}</code> in the Navbar, but it ends up clipping part of the content even when adding margin or padding to either the navbar or the content.</p>
  <p>How can I fix both header and navbar to the screen while keeping the content scrollable?</p>
  <p>These are the relevant parts of my code:</p>
  <p><strong>App.js</strong>:</p>
  <pre class="lang-js prettyprint-override"><code>function App() {
      return (
          &lt;Router&gt;
              &lt;div className='flex flex-col h-screen overflow-hidden'&gt;
                  &lt;Header&gt;&lt;/Header&gt;
                  &lt;div className='MainContent flex-1 overflow-y-scroll py-2 mx-2'&gt;
                      &lt;Routes&gt;
                          &lt;Route path=&quot;/&quot; element={&lt;OrderView /&gt;} /&gt;
                          &lt;Route path=&quot;/DeliverymenView&quot; element={&lt;DeliverymenView /&gt;} /&gt;
                          &lt;Route path=&quot;/InventoryView&quot; element={&lt;InventoryView /&gt;} /&gt;
                          &lt;Route path=&quot;/RouteGenerationView&quot; element={&lt;RouteGenerationView /&gt;} /&gt;
                          &lt;Route path=&quot;/AdministrativeView&quot; element={&lt;AdministrativeView /&gt;} /&gt;
                          &lt;Route path=&quot;*&quot; element={&lt;ErrorView /&gt;} /&gt;
                      &lt;/Routes&gt;
                  &lt;/div&gt;
                  &lt;Navbar&gt;&lt;/Navbar&gt;
              &lt;/div&gt;
          &lt;/Router&gt;
      );
  }
  </code></pre>
  <p><strong>Header.js:</strong></p>
  <pre class="lang-js prettyprint-override"><code>const Header = () =&gt; {
      return (
          &lt;div className=&quot;Header shadow-md bg-white w-full &quot;&gt;
              &lt;CurrentPage /&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p><strong>Navbar.js:</strong></p>
  <pre class="lang-js prettyprint-override"><code>function Navbar() {
      return (
          &lt;div className=&quot;Navbar w-full flex flex-row gap-x-2 justify-evenly py-1 bg-white drop-shadow-md-top&quot;&gt;
              &lt;Link to=&quot;/&quot;&gt;
                  &lt;MdShoppingCart className=&quot;text-zinc-400 text-5xl &quot;&gt;&lt;/MdShoppingCart&gt;
              &lt;/Link&gt;
              &lt;Link to=&quot;/DeliverymenView&quot;&gt;
                  &lt;MdPerson className=&quot;text-zinc-400 text-5xl &quot;&gt;&lt;/MdPerson&gt;
              &lt;/Link&gt;
              &lt;Link to=&quot;/InventoryView&quot;&gt;
                  &lt;MdViewList className=&quot;text-zinc-400 text-5xl &quot;&gt;&lt;/MdViewList&gt;
              &lt;/Link&gt;
              &lt;Link to=&quot;/RouteGenerationView&quot;&gt;
                  &lt;MdDeliveryDining className=&quot;text-zinc-400 text-5xl &quot;&gt;&lt;/MdDeliveryDining&gt;
              &lt;/Link&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>