ReactJS Styling a Component to take full screen with background color

Question

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

This is a pure CSS problem, React does nothing but pass on the style info into the DOM. Also, 100% of what? — TimoStaudinger, Jan 18 '18 at 20:37
If I link a css file using the tag can I refer to the styles in the css file. — john doe, Jan 18 '18 at 20:44

Nicholas · Answer 1 · 2018-01-19T10:12:42.093

12

Make the div 100% of the viewport height.

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

edited Jan 19 '18 at 10:12

answered Jan 18 '18 at 22:02

Nicholas

3,529
2
23
31

3

It would be nice if you add some details about your solution. – Mehdi Dehghani Jan 19 '18 at 06:27

score 7 · Answer 2 · answered Jan 18 '18 at 21:21

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

answered Jan 18 '18 at 21:21

HighHopes

2,014
3
23
33

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. – Abdolrahman Farshgar Jan 31 '23 at 11:07

score 2 · Answer 3 · answered Jun 08 '20 at 15:48

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

answered Jun 08 '20 at 15:48

elvisiraguha

21
3

score 0 · Answer 4 · answered Jan 18 '18 at 21:23

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 · Answer 5 · answered Jan 19 '18 at 03:50

0

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

or

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

answered Jan 19 '18 at 03:50

kg2152

168
2
12

score 0 · Answer 6 · edited Dec 04 '19 at 12:28

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}

ReactJS Styling a Component to take full screen with background color

6 Answers6