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

【问题标题】：scroll bar missing in react web app反应网络应用程序中缺少滚动条
【发布时间】：2018-08-28 13:03:14
【问题描述】：

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

这是反应代码，用于制作我的界面

主页代码：

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;

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

【问题讨论】：

标签： javascript css reactjs web-applications jsx

【解决方案1】：

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

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

【讨论】：

不，我在 github 上没有此代码，我会尝试这样做，并将其上传到 github，谢谢兄弟
我在这个链接上上传了页面的代码谢谢你的帮助gist.github.com/DarkWhite1/7ef18203de953e1ede71cb417ba3708c
删除两个位置：固定；在 .App-header 上并写入 position: absolute 代替

【解决方案2】：

尝试在你的 CSS 中添加 overflow-y: auto 到 .Body{}

【讨论】：

对不起兄弟，没有其他想法？谢谢你的帮助

【解决方案3】：

有一些原因会导致这个问题。你必须做点什么：

当滚动条消失时，请检查并查找滚动条必须存在的主容器。尝试将 CSS 属性修改为“100%”，它可能对你有用，因为它对我有用。
您可以通过执行以下步骤使滚动条始终可见：

html {

    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}

如果以上两个都不起作用，您也可以尝试overflow-y: auto;

【讨论】：