Css 页脚不会自动定位在内容下方

在我的网站上，我努力让页脚总是在页面底部，但我的意思是在页面底部的内容下面。在我的例子中，页脚似乎总是保持在屏幕高度，而不是在内容下方，并调整其位置

这就是它看起来的样子：

下面是处理

布局的App.js的代码


import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Header from './components/Header';
import Footer from './components/Footer';


import Home from './pages/Home';
import NoPages from './pages/NoPages';
import Discover from './pages/Discover';
import HowItWorks from './pages/HowItWork';
import CreateClassAndHost from './pages/CreateClassAndHost';
import Profile from './pages/Profile';
import Messages from './pages/Messages';
import Settings from './pages/Settings';
import Logout from './pages/Logout';
import CreateClass from './pages/CreateClass';
import CreateHost from './pages/CreateHost';
import HereIsTheMission from './pages/HereIsTheMission';
import SuccessfullSubmission from './pages/SuccessfullSubmission';
import CreateHostOnBoardingForm from './pages/HostCreationOnBoarding/CreateHostOnBoardingForm';
import CreateClassOnBoardingForm from './pages/ClassCreationOnBoarding/CreateClassOnBoardingForm';

import './App.css';

function App()  {
    return (
      <div className="app-container">
        <div class="app-header">
          <div class="app-header-menu">
            <Header />
          </div>
        </div>
        <Router>
        <div className="page-content">
          <Switch>
          <Route path="/" exact component={ Home } />
          <Route path="/discover" component={ Discover } />
          <Route path="/howitworks" component={ HowItWorks } />
          <Route path="/create" component={ CreateClassAndHost } />
          <Route path="/profile" component={ Profile } />
          <Route path="/messages" component={ Messages } />
          <Route path="/settings" component={ Settings } />
          <Route path="/logout" component={ Logout } />
          <Route path="/hereisthemission" component={ HereIsTheMission } />
          <Route path="/createaclass" component={ CreateClass } />
          <Route path="/createahost" component={ CreateHost } />
          <Route path="/successfull" component={ SuccessfullSubmission } />
          <Route path="/onboardingclasscreation" component= { CreateClassOnBoardingForm} />
          <Route path="/onboardinghostcreation" component= { CreateHostOnBoardingForm } />
          <Route path="*" component={ NoPages } />
          </Switch>
        </div>
        </Router>
        <div class="app-footer">
          <div class="app-footer-menu">
            <Footer/>
          </div>
        </div>
      </div>
    );
  }

export default App;




要始终确保页脚位于内容下方的底部，有什么想法吗。谢谢
职位：fiexd
可以解决这个问题，但如果您可以创建一个工作演示，我还可以建议更好的解决方案：

.app-footer{
    position:fiexd; // <---- HERE
    bottom:0;
    text-align:center;
}

.app页脚{
位置：fiexd；//创建2个类并在同级元素中添加类

.sticky--footer {
 position: fixed;
 left:0;
 right:0;
 margin: 0 auto;
 bottom: 0;
 z-index: 2;
 box-sizing: border-box;
 padding: 0 .2rem; // depends on need
 height: var(--footerHeight);
 }

.with--footer {
  padding-bottom:. var(--- footerHeight)
 }

不要重复同一个问题-问题之前已经结束，但尚未解决@TemaniAfif@RedBaron我给你做了一个很好的练习：-）所以建议的解决方案都不起作用。页脚固定在页面底部，但如果内容高于页面，页脚与内容重叠，因此我不能使用fixed，因为它卡住了页脚屏幕底部的r不在底部，但始终在屏幕下方content@Seb，您可以查看第二个解决方案。在这种情况下，请查看演示。没有多少机会使其工作。我不确定如何操作。我已在说明中更新了代码。如果您可以将其用作参考，那就太好了
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; // <--- provide some min height so footer stick to footer
  position: relative; // <--- provide position relative
}

.app-footer {
  position: absolute;
  bottom: 0;
  text-align: center;
}

.sticky--footer {
 position: fixed;
 left:0;
 right:0;
 margin: 0 auto;
 bottom: 0;
 z-index: 2;
 box-sizing: border-box;
 padding: 0 .2rem; // depends on need
 height: var(--footerHeight);
 }

.with--footer {
  padding-bottom:. var(--- footerHeight)
 }