reactjs - 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;
}

这是一个在实践中演示的简单代码笔