score:0

what you're asking is more of a "make my div block have the full window or parentdomelement height" than "how to make reactcomponent have the full window or parentdomelement height".

here's a post that explains this: css - expand float child div height to parent's height

the gist of it is that the parent element's position needs to be relative. then, the child (i.e. the element you're trying to make have a height of 100% of its container) will actually have a height of 100% of its container.

here's a demo:

<body>
<div id="title"></div>
<div class="parent">
    <div class="child">
    hi, i am a child
    </div>
</div>
</body>
<style type="text/css">
    .parent {
        position: relative;
        background-color: rgba(50, 70, 200, 0.3);
        width: 100%;
        height: 200px;
    }
    .child {
        height: 100%;
        background-color: rgba(50, 70, 200, 0.3);
    }
</style>

with that, you just need to render your react component inside of the .parent div and should work.

score:0 

var rootstyle = {
  backgroundcolor : 'green',
  color : 'white',
  height : '100vh'
}

or 

var rootstyle = {
  position: absolute,
  top: 0,
  left: 0,
  right: 0,
  bottom: 0
}

score:0 

var rootstyle = {
  backgroundcolor : 'green',
  color : 'white',
  height : '100%'
}

here you apply this style into only div section so for that you need in include "backgroundcolor" property into app.css

class app extends component {
  render() {
    return (
      <div style={rootstyle}> // this style apply only its div not full screen
      <poll />
      </div>
    );
  }
}

app.css
html,body{backgourd:green}

score:2

while answers above might work. the code below solved the issue for me. then you can style what is inside the app component the way you want.

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

score:5

the problem is not react. react just gets the html to the page. the problem is that your body element is only as big as its content. one way around this is to add this to your css:

html, body {
  width: 100%;
  height: 100%;
}

something similar here

score:12

make the div 100% of the viewport height.

var rootstyle = {
  height: '100vh',
  min-height : '100vh'
}

Related Query

More Query from same tag