如何使React Flexbox拉伸至全屏高度

我正在嘗試創建一個針對移動設備進行了優化的React應用程序，並且正在使用Flexbox進行大部分佈局。我無法強制應用程序的主容器自動擴展到完整的設備高度。如何使React Flexbox拉伸至全屏高度

我可以適用什麼規則，特別是我的html容器<div id="react-app"></div>和我的主應用程序容器<App></App>，這樣即使他們的孩子不會強迫他們這樣做，它們也會始終延伸到全屏高度。

您可以使用

height:100vh

您的應用程序組件，但它可以看起來並不完美iOS上的Safari瀏覽器。你也可以設置

 html, body, #reactapp, .App { 
      height: 100%; 
     } 
     .App { 
     display: flex; 
     }

2017-07-27 22:31:27

這些似乎都沒有這樣做的伎倆，任何理由爲什麼不行？ –

@PatrickConnors檢查從html到應用程序標籤的所有標籤，所有標籤都必須具有100％的高度。如果其中一個標籤的高度不合適，則下一個標籤將具有該標籤的100％，而不是全屏。 –

所有的html元素現在都是屏幕的全高。在檢查時，我的最外面的反應組件具有適用於它的樣式「顯示：彎曲」，但在懸停時它仍不能伸展到全高。 –

回答