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

Question

我正在使用 https://github.com/roylee0704/react-flexbox-grid 的 react-flexbox-grid，虽然它允许我指定我无法填满整个页面的列大小。我想要这里看到的圣杯布局：

Answer 1

您可以使用普通的 ol' 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

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

React-Flexbox-Grid: How to fill the whole page?

reactjs

react-flexbox-grid