页脚不要放在页面底部 [英] footer do not go at the bottom of the page

问题描述

在我的网站上，我一直在努力使页脚始终位于页面底部，但我的意思是位于内容下方的页面底部。看来在我的情况下，页脚始终保持在屏幕的高度，而不是在内容下方并调整其位置。

On my website, I am struggling to get the footer always at the bottom of the page but I mean at the bottom of the page below the content. It seems that in my case the footer stay always position at the height of the screen instead of being below the content and adjust its position.

这看起来像：

下面是App.js的代码谁处理布局 -ing

below is the code of the App.js who handle the layout-ing

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 './App.css';

function App()  {
    return (
      <div className="app-container">
        <div class="app-header">
          <div class="app-header-menu">
            <Header />
          </div>
        </div>
        <Router>
        <div>
          <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="*" component={ NoPages } />
          </Switch>
        </div>
        </Router>
        <div class="app-footer">
          <div class="app-footer-menu">
            <Footer/>
          </div>
        </div>
      </div>
    );
  }

export default App;

和相关的CSS：

body,html{
    height :100%;
}

.app-container{
    display :flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
}

.app-header{
    background-color:white;
    padding:10px;
  }

.app-header-menu{
    background-color:white;
    padding:10px;
    width:100vw;
}

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

.app-footer-menu{
    padding:10px;
    background-color:white;
    width:100vw;
}

任何想法都必须确保页脚位于内容底部的底部。谢谢

Any idea to always make sure the footer in at the bottom below the content. Thanks

推荐答案

您需要将页脚组件放在路由器之外：）

You need to but your footer component outside the Router :)

玩得开心^^

这篇关于页脚不要放在页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！