CODEWITHSUNDEEP
cssreactjs
john doe
john doe

Reputation: 9690

ReactJS Styling a Component to take full screen with background color

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

Upvotes: 3

Views: 42122

Answers (6)

elvisiraguha
elvisiraguha

Reputation: 31

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

Upvotes: 2

SHASHANK WANKHADE
SHASHANK WANKHADE

Reputation: 1

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}

Upvotes: 0

Nicholas
Nicholas

Reputation: 3784

Make the div 100% of the viewport height.

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

Upvotes: 12

kg2152
kg2152

Reputation: 168

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

or 

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

Upvotes: 0

Robert Vunabandi
Robert Vunabandi

Reputation: 147

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.

Upvotes: 0

HighHopes
HighHopes

Reputation: 2112

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

Upvotes: 7

Related Questions