React - Component Full Screen（高さ100％）

Question

画面の高さの100％を占めるReactコンポーネント "home"が表示されています。 CSSまたはReactインラインスタイルを使用しても、動作しません。以下の例で

は、HTML、体と#appは、高さに設定されている：CSSで100％。 .home私はインラインスタイルを使用しましたが（CSSまたはインラインスタイルを使用したものは同じです）： 問題は高さ：100％で設定されていない<div data-reactroot data-reactid='1'>からのものです。私はクロームの開発ツールとそれをハッキングした場合、それは仕事

です：

のでリアクトでフルハイト・コンポーネントを表示するための適切な方法は何ですか？

助けを歓迎します:)

Answer 1

お試しください！おそらく他のスタイルがあなたのhtmlボディに影響を与えているからでしょう。

{ height : 100% !important; } 

もあなたがheight : 700vp;のように言及したが、これはポータブルで文句を言わないポートのピクセルをvieeする高さを設定しますVPの値を与えることができます。

Answer 2

それは私を数日間悩ます。最後に、CSSプロパティセレクタを使って解決します。

[data-reactroot] 
     {height: 100% !important; } 

Answer 3

body{ 
height:100% 
} 

#app div{ 
height:100% 
} 

これは私のために動作します。..

Answer 4

html, body, #app, #app>div { 
    height: 100% 
} 

これはあなたにも行うことができ、すべてのチェーンがheight: 100%

Answer 5

であることを保証します：

body > #root > div { 
    height: 100vh; 
}