React - Component Full Screen (with height 100%)

Question

I'm stuck with displaying a React component named "home" that take 100% of the height of my screen. Whatever I use CSS or React inline style it doesn't work.

In the example below, html, body and #app are set to height: 100% in CSS. For .home I used inline style (but whatever I used CSS or inline style is the same): The issue seems to come from <div data-reactroot data-reactid='1'> that is not set with height: 100%.

If I hacked it with Chrome developer tool, it's work:

So what is the proper way to display a full height component in React ?

Any help is welcome :)

Answer 1

html, body, #app, #app>div {
  height: 100%
}

This will ensure all the chain to be height: 100%

Answer 2

You could also do:

body > #root > div {
  height: 100vh;
}

Answer 3

It annoys me for days. And finally I make use of the CSS property selector to solve it.

[data-reactroot] 
        {height: 100% !important; }

Answer 4

try <div style = {{height:"100vh"}}> </div>

Answer 5

I managed this with a css class in my app.css

.fill-window {
    height: 100%;
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
}

Apply it to your root element in your render() method

render() {
   return ( <div className="fill-window">{content}</div> );
}

Or inline

render() {
   return (
      <div style={{ height: '100%', position: 'absolute', left: '0px', width: '100%', overflow: 'hidden'}}>
          {content}
      </div>
   );
}

Answer 6

#app {
  height: 100%;
  min-height: 100vh;
}

Always full height of view min

Answer 7

Despite using of React here - elements layout is completely html/css feature.

The root cause of the issue is in how height property in css works. When you are using relative values for height (in %) - this means that height will be set in relation to its parent.

So if you have a structure like html > body > div#root > div.app - to make div.app 100% height all its ancestors should have 100% height. You may play with next example:

html {
  height: 100%;
}

body {
  height: 100%;
}

div#root {
  height: 100%; /* remove this line to see div.app is no more 100% height */
  background-color: indigo;
  padding: 0 30px;
}

div.app {
  height: 100%;
  background-color: cornsilk;
}

<div id="root">
  <div class="app"> I will be 100% height if my parents are </div>
</div>

Few arguments:

• Usage of !important - despite some time this feature is useful in ~95% of cases, it indicates a poor structure of html/css. Also, this is not a solution to the current problem.
• Why not position: absolute. Property positon is designed to change how the element will be rendered in relation to (own position - relative, viewport - fixed, nearest parent whos position is not static - absolute). Ans despite position: absolute; top: 0; right: 0; bottom: 0; left: 0; will result in the same look - it also pushes you to change parents position to something not static - so you need to maintain 2 elements. That also causes parent div be collapsed in a line (0-height), and inner - full screen. That makes confusion in element inspector.

Answer 8

While this may not be the ideal answer but try this:

style={{top:'0', bottom:'0', left:'0', right:'0', position: 'absolute'}}

It keeps the size attached to borders which is not what you want but gives you somewhat same effect.

Answer 9

body{
  height:100%
}

#app div{
  height:100%
}

this works for me..

Answer 10

I had the same issue displaying my side navigation panel height to 100%.

My steps to fix it was to:

In the index.css file ------

.html {
   height: 100%;
}
.body {
   height:100%;
}

In the sidePanel.css (this was giving me issues):

.side-panel {
   height: 100%;
   position: fixed; <--- this is what made the difference and scaled to 100% correctly
}

Other attributes were taken out for clarity, but I think the issue lies with scaling the height to 100% in nested containers like how you are trying to scale height in your nested containers. The parent classes height will need to be applied the 100%. - What i'm curious about is why fixed: position corrects the scale and fails without it; this is something i'll learn eventually with some more practice.

I've been working with react for a week now and i'm a novice to web developing, but I wanted to share a fix that I discovered with scaling height to 100%; I hope this helps you or anyone who has a similar issue. Good luck!

Answer 11

For a project using CRNA i use this in index.css

html, body, #root {
  height: 100%;
}

and then in my App.css i use this

.App {
  height: 100%;
}

and also set height to 100% for a div within App if there is one eg-

.MainGridContainer {
  display: grid;
  width: 100%;
  height:100%;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 50px auto;
}

Answer 12

<div style={{ height: "100vh", background: "#2d405f" }}>
   <Component 1 />
   <Component 2 />
</div>

Create a div with full screen with background color #2d405f

Answer 13

Adding this in the index.html head worked for me:

<style>
    html, body, #app, #app>div { position: absolute; width: 100% !important; height: 100% !important; }
</style>

Answer 14

I had trouble until i used the inspector and realized react puts everything inside a div with id='root' granting that 100% height along with body and html worked for me.

Answer 15

try using !important in height. It is probably because of some other style affecting your html body.

{ height : 100% !important; }

also you can give values in VP which will set height to viee port pixel you mention likeheight : 700vp; but this wont be portable.