当页面上的内容较少时，React粘性页脚会向上移动

Question

当页面上的内容较少时，我的网络应用程序的页脚将不会停留在底部。我被困住了，不知道从哪里开始。有人可以帮助我一个页脚底部和任何内容下方的页脚吗？

const routing = (
    <Router>
        <div>
            <div>
                <Navbar />
                <Route exact path="/" component={() => (<Redirect to='/home' />)} />
                <Route path="/home" component={Home} />
                <Route path="/about" component={About} />
                <Route path="/films" component={Films} />
                <Route path="/markets" component={Markets} />
                <Route path="/news" component={News} />
                <Route path="/contact" component={Contact} />
                <Route path="/admin" component={Admin} />
                <Footer />
            </div>
        </div>
    </Router>
)

CSS：

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

这是它的样子：

Answer 1

Sticky将无法工作，因为div“被视为相对定位，直到其包含块超过指定的阈值”。

试试这个：position：absolute，bottom：0

Answer 2

将您的页脚放置为位置：绝对位置，并放在正文放置位置：相对位置，因此您的页脚位置相对于您的身体。

然后底部应该是0或100，我忘了，但任何一个应该使页脚粘到底部。