如何在 Next.js (React) 中制作粘性页脚

Question

I want to make a sticky footer that will stick to the bottom if there's not enough content to fill up the whole page. I've searched up ways to do it in CSS, but a lot of them doesn't translate to React/Next since it involves messing with the html and body tag. I'm wondering if there are other ways to do it.

Here is the JSX for my Footer:

     <div>
        <footer>
          <a href={"https://www.instagram.com/linghandmade18/"}>
            <i className="fab fa-instagram" />
          </a>
        </footer>
        <h2>Some Text</h2>
      </div>

Here is my Layout file for Next.js:

const Layout = (props) => {
  return (
    <div>
      <Navbar />
      {props.children}
      <Footer />
    </div>
  );
};

Answer 1

If you don't want to mess with html and body tags then you need a container on which you can apply your style. So first of all create a common container inside your Layout (add container class to parent element), like this:

const Layout = (props) => {
  return (
    <div class="container">
      <Navbar />
        {props.children}
      <Footer />
    </div>
  );
};

Now you have a .container class to the div which is parent div of Navbar, Content and Footer. Now add following styles to the container class:

.container {
  min-height: 100vh;
  position: relative;
}

Because of this your container height will stay at least 100vh (viewport height), it will grow more if content length increases.

And for your footer component, make these changes if the h2 is part of the footer (for better accessibility).

const Footer = (
  <footer>
    <a href={"https://www.instagram.com/linghandmade18/"}>
      <i className="fab fa-instagram" />
    </a>
    <h2>Some Text</h2>
  </footer>
);

For footer styling you can add this style:

footer {
  position: absolute;
  bottom: 0;
  left: 0;
}

This way it will always stay in the bottom position regardless of the content height.