CODEWITHSUNDEEP
reactjsjsx
Allan Jiang
Allan Jiang

Reputation: 11331

ReactJS component height '100%'

I want to set my immediate child node of <div id='root'> to be height: 100%, however I realized react is adding an extra layer of react node preventing the child's height: 100% from working. Example below:

<html>
<body>
<div id="root"> <== root node is height:100%, still good here
  <div data-reactid=".0"> <== added by react? broke the child height
    <div data-reactid=".0.$/=10" style="height: 100%; background-color: gray;"> <== child can't get 100% height of #root because of the empty div wrapping it

My JSX code is not adding this data-reactid='.0' wrapper div, so I don't have control over the styles. So the question here is, how do I have control over this wrapper div, or how do I achieve height:100% using some other approach?

Thanks!

Upvotes: 1

Views: 7021

Answers (3)

qunshan
qunshan

Reputation: 57

the wrapper div should be in your code, something like this:

render() {
    return (
        <div> // the wrapper div
            <div style={{ height: "100%", "background-color": "gray" }}></div>
        </div>
    );
}

Upvotes: 2

user3785155
user3785155

Reputation: 69

body {
  height:100%
}

#root > div {
  height:100%
}

This will apply width:100% to all direct div child nodes of #root.

Upvotes: 0

user3110927
user3110927

Reputation: 

#root > div {
  height:100%;
}

Upvotes: 0

Related Questions