Javascript 页脚不'；不要呆在原地（盖茨比）

为什么我那该死的页脚不在页面底部

从“React”导入React
从“/Navbar”导入Navbar
从“/Footer”导入页脚
从“/Sidebar”导入侧栏
导入“/layoutplus.css”
常量布局=（{children}）=>{
返回(
{儿童}
)
}
导出默认布局
从“React”导入React
从“盖茨比”导入{Link}
从'react icons/fa'导入{FaFacebook、fawitter、FaInstagram}
导出默认函数页脚（）{
返回(

家
向导
关于






和盖茨比一起建造

&复制；{new Date（）.getFullYear（）}bla-保留所有权利

)
}

/*主控*/
.主控{
最大宽度：1344px；
保证金：0自动；
显示：网格；
高度：100vh；
网格模板柱：4.5fr 1.5fr；
网格模板行：1fr 1fr；
差距：1勒姆；
网格模板区域：
“主要测试后广告”
“主要测试后热点”；
填充顶部：40px；
}
@仅介质屏幕和（最大宽度：800px）{
.主控{
网格模板列：1fr；
网格模板行：2fr 1fr 1fr；
网格模板区域：
“主要职位”
“测试广告”
“测试热点”；
右边填充：10px；
左侧填充：10px；
}
}
.主要职位{
网格区域：主柱；
}
.测试广告{
网格区域：测试广告；
边框：1px实心绿黄色；
文本对齐：居中；
}
.测试热门话题{
网格区域：测试热点；
边框：1px纯红；
文本对齐：居中；
}
/*页脚*/
.页脚{
位置：固定；
底部：0；
宽度：100%；
文本对齐：居中；
背景：var（--bgGray）；
保证金：0；
垫底：20px；
}
.页脚中间{
颜色：var（--maine）；
}
.页脚中间{
列表样式：无；
颜色：var（--mainWhite）；
填充：0rem 2px；
}
.footer middle li{
字号：1.2rem；
显示：内联；
保证金权利：1.5雷姆；
}
.页脚底部{
垫面：0.5雷姆；
垫底：2rem；
}
.页脚链接{
颜色：var（--灰白色）；
文字装饰：无；
}
.footer链接：悬停{
颜色：var（--mainOrange）；
}
.页脚ul{
列表样式：无；
显示：内联；
}
.页脚点{
颜色：var（--灰白色）；
高度：27px；
宽度：27px；
}
.footer点：悬停{
转换：var（--mainTransition）；
颜色：var（--mainOrange）；
}

对于盖茨比，你应该稍微动一下脑筋，因为访问内容的包装不是那么容易，但当然，这是可行的

以您的

为例：

import React from "react"

import Navbar from "./navbar"
import Footer from "./footer"
import Sidebar from "./sidebar"

import "./layoutplus.css"

const Layout = ({ children }) => {
  return (
    <>
      <Navbar />
        <div className="main-cont">
          <main id="main-post" className="main-post">{children}</main>

          <Sidebar id="sidebar" className="sidebar"/>
        </div>
      <Footer />
    </>
  )
}

export default Layout

基本上，您是在告诉包装器（

site wrapper

）展开，直到填充视口（

100vh

）。由于

main

标记（如果需要，将其更改为所需的类）可以自由增长（

flex-grow:1

），因此页脚将始终位于页面底部，因为它由flexbox列的其余部分推送

---

在旧浏览器中比以前有更好的接受/回退能力，但您可以通过任何一种方式实现，其想法始终是推动（或让

main

增长）底部的页脚，而不依赖于上面的内容，使用一些应该使用基于网格的方法来实现这一目的。

请在codesandbox.io或codepen.iots上提供您的问题的演示链接，以获得解释性答案！不幸的是，页脚看起来仍然像z-index:1，并显示在页面主要内容的顶部。我会尝试清理我的css，看看这个方法是否有效，只是清理了我的css的一部分，看起来很有效！我要把剩下的清理干净，希望还能用！非常感谢你！

const Layout = ({ children }) => {
  return (
    <section className="site-wrapper">
      <Navbar />
        <div className="main-cont">
          <main id="main-post" className="main-post">{children}</main>

          <Sidebar id="sidebar" className="sidebar"/>
        </div>
      <Footer />
    </section>
  )
}

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

main  {
  flex-grow: 1;
}