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

【问题标题】：How do I make a sticky footer in Next.js (React)如何在 Next.js (React) 中制作粘性页脚
【发布时间】：2021-02-22 02:02:50
【问题描述】：

我想制作一个粘性页脚，如果没有足够的内容来填满整个页面，它会粘在底部。我已经搜索了在 CSS 中执行此操作的方法，但是其中很多都没有转换为 React/Next，因为它涉及到弄乱 html 和 body 标记。我想知道是否有其他方法可以做到这一点。

这是我的页脚的 JSX：

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

这是我的 Next.js 布局文件：

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

【问题讨论】：

“HTML”和“BODY”标签有什么问题？你只需要定位：固定和底部：0到你的元素

标签： javascript html css reactjs next.js

【解决方案1】：

如果您不想弄乱 html 和 body 标签，那么您需要一个可以应用您的样式的容器。所以首先在你的 Layout 中创建一个公共容器（将容器类添加到父元素），如下所示：

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

现在你有一个.container 类到 div，它是导航栏、内容和页脚的父 div。现在将以下样式添加到容器类中：

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

因此，您的容器高度将保持至少 100vh（视口高度），如果内容长度增加，它会增长得更多。

对于您的页脚组件，如果 h2 是页脚的一部分，请进行这些更改（为了更好的可访问性）。

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

对于页脚样式，您可以添加以下样式：

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

这样无论内容高度如何，它都会始终保持在底部位置。

【讨论】：