React Flexboxストレッチを全画面の高さにする方法

私はモバイル向けに最適化されたReactアプリケーションを作成しようとしており、flexboxを使ってほとんどのレイアウトを行っています。アプリのメインコンテナに自動的にデバイスの高さ全体が表示されるようにするのに問題があります。React Flexboxストレッチを全画面の高さにする方法

具体的には、自分のhtmlコンテナ<div id="react-app"></div>と私のメインのアプリケーションコンテナ<App></App>に適用できるルールは、子どもたちが強制的に全画面の高さに伸びるようにするためです。

あなたはあなたのアプリケーションコンポーネントの

height:100vh

を使用することができますが、それは、iOSのSafariには完璧ではないに見えることができます。また、あなたが設定することができます

2017-07-27 22:31:27

これらのどちらも、それは動作しない理由をトリック、何かをしているようですね？ –

@PatrickConnorsは、htmlからapplicationタグまでのすべてのタグをチェックします。すべてが100％の高さでなければなりません。そのうちの1つが適切な高さを持たない場合、次のタグは全画面ではなくこのタグの100％を持ちます。 –

html要素はすべて画面の高さになりました。検査されたとき、最も外側の反応コンポーネントは、それに適用されるスタイル "display：flex"を持っていますが、上に乗ると完全な高さに伸びません。 –

答えて