如何创建固定在底部甚至滚动的页脚？

Question

我构建了一个网络应用程序，我想在底部添加一些页脚，但问题是我创建的页脚只显示在页面的末尾，如果我向下滚动，他仍然在相同的位置

例如：我打开我的应用程序的一个新标签，我看到了这个：

如果我向下滚动页面，我会看到：

显示：我的 css 中的“固定”对我来说不是一个好的选择，因为我希望页脚位于所有项目下方，坚持页面的底部。

用户只有在向下滚动到页面末尾时才会看到页脚。

这是我的css风格：

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding:10px;
    background-color:#17a2b8;
    text-align:center;
    color:white;
}

我的页脚：从“反应”导入反应；导入'./Footer.css'

const Footer = () => (
  <footer>
    <p>This is some content in sticky footer</p>
  </footer>
);

导出默认页脚；

编辑

在我将 css 样式更改为 :

之后

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding:10px;
    background-color:#17a2b8;
    text-align:center;
    color:white;
}

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

并用主包装器包装我的应用程序 div:

 return(
  <Provider store={store}>
    <Router>
     <div className="main-wrapper">
    <Fragment>
        <Navbar/>
        <Route exact path="/" component={Landing} />
        <Switch>
        <div className="container">
          <Route exact path="/register" component={Register}/>
          <Route exact path="/login" component={Login}/>
          <Route exact path="/profiles" component={Profiles}/>
          <Route exact path="/profile/:id" component={Profile}/>
          <PrivateRoute exact path="/dashboard" component={Dashboard}/>
          <PrivateRoute exact path="/create-profile" component={CreateProfile}/>
          <PrivateRoute exact path="/edit-profile" component={EditProfile}/>
          <PrivateRoute exact path="/add-education" component={AddEducation}/>
          <PrivateRoute exact path="/add-experience" component={AddExperince}/>
          <PrivateRoute exact path="/posts" component={Posts}/>
          <PrivateRoute exact path="/posts/post/:id" component={Post}/>
          </div>
        </Switch>
        <Footer/>
      </Fragment>
      </div>
    </Router>
  </Provider>
)}

我还有一点余地：

Answer 1

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

return(
  <Provider store={store}>
    <Router>
    <div className="main-wrapper">
        <Navbar/>
        <Route exact path="/" component={Landing}/>
        <Switch>
        <div className="container">
          <Route exact path="/register" component={Register}/>
          <Route exact path="/login" component={Login}/>
          <Route exact path="/profiles" component={Profiles}/>
          <Route exact path="/profile/:id" component={Profile}/>
          <PrivateRoute exact path="/dashboard" component={Dashboard}/>
          <PrivateRoute exact path="/create-profile" component={CreateProfile}/>
          <PrivateRoute exact path="/edit-profile" component={EditProfile}/>
          <PrivateRoute exact path="/add-education" component={AddEducation}/>
          <PrivateRoute exact path="/add-experience" component={AddExperince}/>
          <PrivateRoute exact path="/posts" component={Posts}/>
          <PrivateRoute exact path="/posts/post/:id" component={Post}/>
          </div>
        </Switch>
        <Footer/>
      </div>
    </Router>
  </Provider>
)}

现在可以使用了

Answer 2

您可以将整个页面包裹在 div 中，并为 div 应用以下样式：

.main{
  height: 100vh;
  position: relative;
}

如何创建固定在底部甚至滚动的页脚？

How to create footer fixed to bottom even scrolling?

css

footer

reactjs