React-Flexbox-Grid：如何填充整个页面？

Question

我使用的是https://github.com/roylee0704/react-flexbox-grid的react-flexbox-grid，它允许我指定列的大小，我无法填充整个页面。 我想要圣杯布局，如下所示：

Answer 1

你可以用普通的“flexbox”来做到这一点。你可能只是想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> 

容器用下面的CSS：

.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