只有当内容很少时，页脚才会卡在中间

Question

我知道标题是已知的'issue'。但是，我尝试了很多解决方案，但 none 似乎有效。

我的页脚几乎在所有情况下都卡在底部（呸）（当有很多内容时，当我可以滚动时，..）。可悲的是，当几乎没有任何内容时，它会直接进入中间。我真的不知道为什么会这样 :( 我在我的网站上使用 Gatsbyjs。

这是global.css

html {
  height: 100%;
}

main {
  flex: 1 0 auto;
}

body {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  margin: 0;
  font-family: "Roboto", sans-serif;
  color: whitesmoke;
  background: radial-gradient(circle at center, #2b2b2b, #414141);
}

我的 footer.js 组件和它的 css 是：

css:

footer {
  background-color: #2b2b2b;
  position: relative;
  font-size: smaller;
  opacity: 0.98;
  padding: 1rem;
  width: 100%;
  margin-top: auto;
}

html 对于页脚：

 const Footer = () => {
  return (
    <div>
      <footer>
        <p>©Copyright {currentYear} Humital - Made with ❤️</p>
      </footer>
    </div>
  )
}

export default Footer

主要html来自layout.js:

<div className={styles.flex}>
    <NavBar />
    <div className={styles.container}>
      <main>{children}</main>
    </div>
    <Footer />
  </div>

其中包含一些 css 容器：

    .container {
  display: flex;
  flex-direction: column;
  padding-top: 5rem;
  padding-bottom: 1rem;
  margin-left: 1rem;
  line-height: 1rem;
  flex: 1 0 auto;
  position: relative;
}

.flex {
  flex: 1;
}

不确定为什么没有内容时页脚不会下降 :( 欢迎任何帮助！:)

Answer 1

我认为您只需要将 min-height: 100vh 规则（和 flex-direction）添加到您的 .flex class:

.flex {
  flex: 1;
  min-height: 100vh;
  flex-direction: column;
}

因为您的 .container 有 flex: 1 0 auto 会将页脚推到底部。

总结一下，你只需要这个规则就可以把你的页脚贴在底部：

.flex { 
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  flex: 1 0 auto;
}

.flex适用于外包装，包含Footer、<main>和<NavBar />.

.container 适用于 <main> 或 <main> 的包装器。我认为不需要用另一个 <div> 包裹 <main>，您可以将样式直接应用于 <main> 标签，但是将页脚推到底部的方法完全相同.

只有当内容很少时，页脚才会卡在中间

Footer stuck in middle only when there is little content

html

css

flexbox

gatsby