How to make React Flexbox stretch to full screen height

问题

I'm trying to create a React app that is optimized for mobile and am doing most of the layout using flexbox. I'm having trouble forcing the main container of my app to automatically expand to the full device height.

What rules can I apply, specifically to my html container <div id="react-app"></div> and my main app container <App></App> so that they will always stretch to the full screen height, even when their children wouldn't force them to do so?

回答1:

You can use

height:100vh

for your App component, but it can looks not perfect on iOS Safari. Also you can set

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

回答2:

patelarpan's answer here seems to be the most concise solution:

You can achieve this by using "vh" units, and it's a more effective way than using percentages because you don't need to set every parent height to 100% if you want the child's height to be 100%.

.columnContainer { 
   display: flex; 
   height: calc(100vh - 60px);
}

Here is an example of the 60px app bar height being excluded from the viewport height.

I replaced the height line in patelarpan's example with this, since I don't have an app bar:

height: 100vh;

回答3:

root > [data-reactroot] { height: 100% } in your CSS should work.

Or just the tag itself:

[data-reactroot] { ... }

来源：https://stackoverflow.com/questions/45361928/how-to-make-react-flexbox-stretch-to-full-screen-height