i made an interface using react but when i add more items to the screen and the screen gets full the scroll down bar doesn't appear and i can't see the elements that are at the end of the page. thank you for your time i really appreciate it.

this css is written in a single folder it is ment to the css for all my pages i don't know if this could make this problem

css code :

.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;
}

this is the react code that , used to make my interface i have another page called index the only code in there is to create pathes between pages it is also has the header .

home page code :

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;

thank you for your time i hope i described my problem in a good way :)

i made an interface using react but when i add more items to the screen and the screen gets full the scroll down bar doesn't appear and i can't see the elements that are at the end of the page. thank you for your time i really appreciate it.

this css is written in a single folder it is ment to the css for all my pages i don't know if this could make this problem

css code :

.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;
}

this is the react code that , used to make my interface i have another page called index the only code in there is to create pathes between pages it is also has the header .

home page code :

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;

thank you for your time i hope i described my problem in a good way :)

• javascript
• css
• reactjs
• web-applications
• jsx

4 Answers 4

There are some reasons that can make this problem. you have to do something:

1. When scrollbar gets disappear go to inspect and look for the main container that scrollbar has to be there. try to revise the CSS properties like with to "100%" it'll may work for you as it worked for me.
2. You can make the scroll bar always visible by doing this steps:

html {

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

3. If those two above didn't work you can try overflow-y: auto; as well

I do not have the exact answer but what would i do is, i would go and delete one after the other css property or maybe even a whole block of css properties on specific class until i find which line causes the problem

do you have this code on github so i can download it and see if i can solve the problem for you?

Try add overflow-y: auto to .Body{} in your css

It is because of the position of your .App-header set to fixed, Remove the position: fixed; property and it will show