【发布时间】：2020-06-13 08:18:13
【问题描述】：
我正在建立一个网站，但我遇到了位置问题，我不知道为什么页脚没有正确放置。
所以我设置了 App.js 以在页面顶部显示页眉并始终在底部显示页脚。但是由于某些原因，当我加载其他页面（例如此处）时，页眉仍然可以，但页脚和页面内容重叠，如下图所示。不注意标题，因为屏幕短，它被剪掉了。
查看内容（txt、h 标记和蓝色按钮）和标题如何重叠。无论发生什么，我都希望始终在页眉和页脚之间保留内容。
应该是这样的：
图片上连标题都没有显示
下面是 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 './App.css';
function App() {
return (
<Router>
<div>
<div>
<Header />
</div>
<div className='page-container'>
<div className='content-wrap'>
<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>
<div className='footer'>
<Footer />
</div>
</div>
</div>
</Router>
);
}
export default App;
以及相关的css App.css
.page-container {
position: relative;
min-height: 90vh;
}
.content-wrap {
padding-bottom: 2.5rem;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem;
}
内容在单独的文件中完成并通过/create navlink 加载
但它看起来像机会
以下是我的内容文件：
import React from 'react';
import TextContents from '../assets/translations/TextContents';
import BlueButton from '../components/materialdesign/BlueButton';
import './CreateClassAndHost.js';
class CreateClassAndHost extends React.Component {
render() {
const CreateAClass =
<div className="tile">
<h2 className="subtitle" >{TextContents.BeATeacher}</h2>
<p className="text" >{TextContents.BeATeacherDesc}</p>
<div className="button">
<BlueButton textSize="13" link_href="/createaclass" text={TextContents.BeATeacherBtn} />
</div>
</div>;
const CreateAHost =
<div className="tile">
<h2 className="subtitle">{TextContents.HostAClass}</h2>
<p className="text">{TextContents.HostAClassDesc}</p>
<div className="button">
<BlueButton textSize="13" link_href="/createahost" text={TextContents.HostAClassBtn} />
</div>
</div>;
return (
<div className="container">
<h1 className="title">{TextContents.CreateClassOrHostTitle}</h1>
<div classname="section">
{CreateAClass}
{CreateAHost}
</div>
</div>
);
}
}
export default CreateClassAndHost;
以及相关的 css：
.container {
width: 650px;
position: absolute;
display: flex;
text-align: center;
margin: auto;
top:30%;
bottom: 0;
left: 0;
right: 0;
}
.section {
display: inline-block;
}
.tile {
position: relative;
left: 12px;
top: 80px;
text-align: center;
width: 200px;
height: 250px;
background-color: #ffffff;
}
.title {
font-family: Fredoka One;
font-size: 50px;
color: #333333;
}
.subtitle {
font-family: Source Sans Pro;
font-weight: bold;
font-size: 30px;
line-height: 0.7;
color: #333333;
letter-spacing: -0.6px;
}
.text {
font-family: Source Sans Pro;
font-size: 20px;
line-height: 1.6;
color: #616161;
width: 280px;
height: 85px;
}
.button {
position: relative;
left: 0px;
top: 50px;
}
有什么想法吗？
【问题讨论】：
标签： javascript css reactjs react-bootstrap