Css 为什么我的页脚没有停留在盖茨比网站的底部？_Css_Gatsby

Css 为什么我的页脚没有停留在盖茨比网站的底部？

css gatsby

Css 为什么我的页脚没有停留在盖茨比网站的底部？,css,gatsby,Css,Gatsby,因此，我将内容包装在布局组件中，所有其他页面将页脚推到底部，因为内容比实际屏幕大。但是，我有一个页面内容较少，现在如果我在更大的高度屏幕上看到它，我的页脚就很尴尬。这是我的页脚css export const FooterContainer = styled.div` background-color: #101522; display: flex; flex-direction: column; justify-co

因此，我将内容包装在布局组件中，所有其他页面将页脚推到底部，因为内容比实际屏幕大。但是，我有一个页面内容较少，现在如果我在更大的高度屏幕上看到它，我的页脚就很尴尬。

这是我的页脚css

      export const FooterContainer = styled.div`
        background-color: #101522;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;
        width: 100%;
      `

我的布局分区css

 .layout {
   padding-bottom: 160px;
   position: relative;
 }

我的布局组件

           return (
          <>
            <Sidebar isOpen={isOpen} toggle={toggle} />
            <Navbar toggle={toggle} />
            <div className="layout">
              <main>{children}</main>
              <Footer />
            </div>
          </>
        )
      }

返回(
{儿童}
)
}

然后在我的页面中，我的页脚没有粘在底部，这是我的代码

             <Layout>
          <div className="resource__container">
            <h1 className="post__heading">
              Here are some resources to learn web development
            </h1>
            <Posts posts={posts} key={posts.id} />
          </div>
        </Layout>


下面是一些学习web开发的资源

这是一张照片，展示了正在发生的事情

顶部的黑色条是导航条

红色部分是我的

.resource\uu容器

下面的空白是

布局中的填充底部：160px

最后一个空格是页脚

在那之后，它只是
，但从技术上讲，它什么都没有，所以我不知道为什么它没有粘到底
给定如下HTML结构：
<body>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>
</body>

关键是main
标签的min height:100vh
和flex:1

有用资源：




给定如下HTML结构：
<body>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>
</body>

关键是main
标签的min height:100vh
和flex:1

有用资源：




你的主页设置为100%高度吗？我试图添加，但我的页脚会在手机屏幕上升起，破坏我的博客帖子设计，所以不确定我做错了什么？你的主页设置为100%高度吗？我试图添加，但我的页脚会在手机屏幕上升起，破坏我的博客帖子设计，所以我不确定我做错了什么