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

Question

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

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

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

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

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

这是我的 CSS 风格：

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

我的页脚：从“react”导入 React；导入'./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;
   }

并用 main-wrapper 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>
)}

我还有一点余量：

标签： cssreactjsfooter

Answer 1

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

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