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