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

问题描述

我构建了一个Web应用程序，我想在页面底部添加一些页脚，但是问题是我创建的页脚仅显示在页面的末尾，如果向下滚动，则该页脚仍位于同一位置>

例如：我打开应用程序的新标签，然后看到以下内容：

如果我向下滚动页面，则会看到以下内容：

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

仅当用户向下滚动直到页面末尾时，用户才会选择页脚。

这是我的CSS样式：

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

我的页脚：从“反应”导入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包装我的App：

 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>
)}

我还有一点利润：

解决方法

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

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

.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>
)}

现在可以使用

footer reactjs reactjs