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

リアクションは、確実にラッパー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％'

答えて

関連する問題