React-Flexbox-Grid：ページ全体を埋めるには？

Question

https://github.com/roylee0704/react-flexbox-gridの反応フレックスボックスグリッドを使用していますが、私はページ全体を埋めることができません。 私は聖杯レイアウトがここにあるようにしたい：

Answer 1

これはplain ol 'flexboxで行うことができます。あなたはおそらく、以下のCSSでmin-height: 100vh;

<div class="container"> 
    <div class="header"></div> 
    <div class="content"> 
    <div class="left"></div> 
    <div class="center"></div> 
    <div class="right"></div> 
    </div> 
    <div class="footer"></div> 
</div> 

とコンテナたい：私は「位置を使用していますので、

.container { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
} 

.header, .footer { 
    height: 76px; 
} 

.left, .right { 
    width: 76px; 
} 

.content, .center { 
    flex: 1; 
} 

.content { 
    display: flex; 
} 

here is a simple codepen demonstrating it in practice