React - Component Full Screen (With Height 100%)

react component not taking full height of screen

From mdn,

The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to auto. A percentage height on the root element is relative
to the initial containing block.

Using height: 100vh; will take the full-page height as you are expecting.

But if you want index_body to take the height remaining after navbar, you can do something like below.

<>
   <nav className="navbar"></nav>
   <div className="index_body"> </div>
</>

Styles

.navbar {
   height: 100px; //example
}
.index_body {
   height: calc(100vh - 100px);
}

ReactJS body,html height 100%

Change your CSS to this:

.App {
  min-height: 100%
}

cant get background image on full screen size in reactjs

Set background-image for the <body> or set the parent div height to 100vh and set background to it. This way you can achieve your requirement.

html, body {height: 100%; margin: 0; }

.formParent {display: flex; width: 100%; align-items:center; justify-content: center; height: 100vh; background: url('https://picsum.photos/seed/picsum/200/300') no-repeat fixed; background-size:cover; }
form {background: #fff; border-radius: 10px; max-width:50%; padding: 30px;}
form div {display: block;}

<html>
  <body>
    <div class="formParent">
      <form>
        <div>
          <label>Name</label>
          <input type="text">
        </div>
      </form>
    </div>
  </body>
</html>

React header doesn't fill screen

It seems that you are scrolling the page, not the header itself.
You better check the other elements, since they might overflow.

If you checked other elements:
Really depends on what other styles are added to the element, but you can try:

max-width: 100%; as Ollie said, but keep in mind the box model:

.navbar-container {
  max-width: 100%;
  box-sizing: border-box;
}

Or you can hide the overflow:

.navbar-container {
  width: 100%;
  overflow-y: hidden;
  overflow-x: hidden; // if necessary
}

How to make React Flexbox stretch to full screen height

You can use

height:100vh

for your App component, but it can looks not perfect on iOS Safari. Also you can set

        html, body, #reactapp, .App {
          height: 100%;
        }
       .App {
         display: flex;
        }