3

Is there anyway I can tell React component to take full screen and the background color will be green. The code below does not make the height 100%.

var rootStyle = {
  backgroundColor : 'green',
  color : 'white',
  height : '100%'

}

class App extends Component {
  render() {
    return (
      <div style={rootStyle}>
      <Poll />
      </div>
    );
  }
}
3
  • 1
    This is a pure CSS problem, React does nothing but pass on the style info into the DOM. Also, 100% of what? Commented Jan 18, 2018 at 20:37
  • 1
    If I link a css file using the <link> tag can I refer to the styles in the css file.
    – john doe
    Commented Jan 18, 2018 at 20:44
  • 100% of the parent right! Parent is the body.
    – john doe
    Commented Jan 18, 2018 at 20:44

6 Answers 6

12

Make the div 100% of the viewport height.

var rootStyle = {
  height: '100vh',
  min-height : '100vh'
}
1
  • 3
    It would be nice if you add some details about your solution. Commented Jan 19, 2018 at 6:27
7

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

1
  • This solution helped me. Thanks. Also, I needed to target #root which is the id of the div that React points to in the Index.jsx and make it to have width and height 100% as well. Commented Jan 31, 2023 at 11:07
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%;
}
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.

0
var rootStyle = {
  backgroundColor : 'green',
  color : 'white',
  height : '100vh'
}

or

var rootStyle = {
  position: absolute,
  top: 0,
  left: 0,
  right: 0,
  bottom: 0
}
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}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.