Question

我使用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;
}

这是反应代码，用于使我的界面我有另一个名为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;

谢谢你的时间，我希望我能以一种好的方式描述我的问题：）

Answer 1

尝试在{css

中将overflow-y: auto添加到.Body{}

Answer 2

我没有确切的答案，但我会做的是，我会删除一个接着另一个css属性，或者甚至可能在特定类上删除整个css属性块，直到找到哪一行导致问题

你在github上有这个代码所以我可以下载它，看看我能否为你解决问题？

反应网络应用程序中缺少滚动条

2 个答案: