react web app中缺少滚动条

我用react创建了一个界面,但是当我在屏幕上添加更多的项目时,屏幕就会满了,向下滚动条就不会出现,我也看不到页面末尾的元素。谢谢你抽出时间,我真的很感激。

这个css写在一个文件夹中,它是我所有页面的css的一部分,我不知道这是否会造成这个问题

css代码:

.App-header {
  position: fixed;
  display: block;
  width: 100%;
  background-color: #222;
  color: #FFFF;
  height:90px;
  position: fixed;
}
.App-header ul li{
  float:left;
  padding-top:25px;
  padding-left: 10px;
  padding-bottom: auto;
}
.App-header ul li h1{
display:inline;
padding-left: 8px;
padding-right: 8px;
}
.App-header ul li{
display:inline;
}
.App-header ul li a{
text-decoration:none;
font-size:15px;
font-weight:bold;
color:white;
}
.App-header ul li a:hover{
text-decoration:underline;
text-decoration-color: red;
}

.Body{
  position:absolute;
  margin-top: 90px;
  width:100%;
}
.Body h1 {
  color: black;
}
.Body p{
  color:black;
}
.Newfeeds {
  float:right;
  border: solid red;
  margin-right:10px;
  width:200px;
}
.Newfeeds h1{
  font-size: 20px;
  text-decoration:underline;
}
.weather{
  border: solid green;
  float:left;
  height:400px;
  width:400px;
  margin-left:15px;
}

这是react代码,用于使我的界面有另一个名为index的页面,其中唯一的代码是在页面之间创建路径,它也有标题。

主页代码:

import React, {Component} from 'react';
import '../Css/App.css';
class HomePage extends Component {
  render(){
    return(
      <div className="Body">
        <div className="Newfeeds">
          <h1>Your daily information</h1>
<p>A Kangaroo cannot walk backwards.

The San Francisco cable cars are the only mobile National Monuments.

The only 15 letter word that can be spelled without repeating a letter is uncopyrightable.

Non - dairy creamer is flammable

A duck's quack doesn't echo and no one knows why.
Although, the show Brianiac has proved that it does in fact does echo.

In the Wizard of Oz Dorothy's last name is
Gail. It is shown on the mail box.</p>
</div>
      <div className="weather">

      </div>
    </div>
    );
  }
}
export default HomePage;

感谢您抽出时间,我希望我能很好地描述我的问题:)