The Only And Easy Way To Push That Footer Down With CSS

Try it yourself in our playground

Follow along with the tutorial, or just play around with the code. PRO members can fork this code and save it to their account.

Jeroen Reumkens PRO

Not many things will make me table flip in life. Yet a floating footer does. Especially since the fix is so easy — please, don't do this 🥺

1
export const App = () => {
2
  return (
3
    <div className="bg-beige grid min-h-dvh grid-rows-[auto_1fr_auto]">
4
      <header className="sticky top-0 flex h-24 items-center justify-between bg-white p-3 text-xl">
5
        <a href="/" className="text-3xl">
6
          🐐
7
        </a>
8
        <nav className="flex gap-2 *:rounded-lg *:bg-gray-200 *:text-gray-200 max-md:*:h-[20px] max-md:*:w-[35px] max-md:*:overflow-hidden">
9
          <a href="/">Some link</a>
10
          <a href="/">Some link</a>
11
          <a href="/">Some link</a>
12
          <a href="/">Some link</a>
13
          <a href="/">Some link</a>
14
        </nav>
15
      </header>
16
      <main>
17
        <section className="grid place-items-center py-20 text-center text-white">
18
          <h1 className="mb-3 max-w-[32ch] font-mono text-lg leading-snug font-bold md:text-4xl">
19
            Mess up any website effortlessly by having a floating footer 🥲
20
          </h1>
21
          <p className="text-lg">Luckily the fix is super easy!</p>
22
        </section>
23

24
        {/* <section className="h-[300vh] bg-white pt-8 text-center">
25
          More content
26
        </section> */}
27
      </main>
28
      <footer className="bg-black px-3 py-12 text-center text-white">
29
        <p className="font-mono text-[8vw] italic">GOAT Enterprises</p>
30
        <p>&copy; 2039</p>
31
      </footer>
32
    </div>
33
  );
34
};

When building websites it’s the small details that matter most. Too often I see websites where there page content is very short, and all of a sudden we have a floating footer. [insert me facepalming here]

With modern CSS it is SO easy to fix this, that there’s literally no reason to have this happening on your site. Let me show you how!

The Only And Easy Way To Push That Footer Down With CSS

Try it yourself in our playground

Auto-hiding Sticky Navigation With Motion for React