ReactJS组件高度'100％'

我想将我的直接子节点<div id='root'>设置为height: 100%，但是我意识到反应是添加了一个额外的反应节点层，以防止孩子的height: 100%无法正常工作。下面的示例：ReactJS组件高度'100％'

<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

我的JSX代码不加入这个data-reactid='.0'包装DIV，所以我没有在样式控制。所以这里的问题是，我如何控制这个包装div，或者如何使用其他方法实现height:100%？

谢谢！

来源

2016-06-28 Allan Jiang

React确实没有添加包装div，任何小提琴？ –

包装DIV应该是在你的代码，这样的事情：

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

来源

2016-06-28 06:25:54 qunshan

body{ 
height:100% 
} 

#root div{ 
height:100% 
}

在你的CSS添加此，它为我工作。

来源

2017-03-05 14:28:03 user3785155

#root > div { 
    height:100%; 
}

来源

2017-06-13 19:43:39 froston

ReactJS组件高度'100％'

回答

相关问题