使用 flexbox 和 bootstrap 卡填充高度

【问题标题】：Filling height with flexbox and bootstrap cards使用 flexbox 和 bootstrap 卡填充高度
【发布时间】：2020-04-15 14:47:32
【问题描述】：

我有一个使用 Bootstrap 容器和卡片的页面。我试图让.card-body 填满屏幕的整个高度，但高度在内容结束后结束。这是一个演示问题的小提琴。 Fiddle

.page-container {
  min-height: 100vh;
}

.main-content {
  min-height: calc(100vh - 0px);
  -webkit-box-flex: 1;
  flex-grow: 1;
}

.container {
  width: 100%;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-body {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  background: #ccc;
}

<div class="page-container">
  <div class="main-content">
    <div class="container form-container">
      <div class="card">
        <div class="card-body">
          This should be full height!
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap flexbox

【解决方案1】：

.main-content 下的所有容器都没有定义高度。那么为什么.card-body 会是全高呢？（请注意，在 HTML/CSS 中，most elements are height: auto by default.）

您可以为嵌套容器添加高度，或者添加display: flex，这将给子级full height through the align-items: stretch default。

.page-container {
  min-height: 100vh;
}

.main-content {
  min-height: calc(100vh - 0px);
  flex-grow: 1;
  display: flex;   /* new */
}

.container {
  flex: 1;         /* new; for width; */
  display: flex;   /* new */

}

.card {
  flex: 1;         /* new */
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1 1 auto;
  background: #ccc;
}

body {
  margin: 0;
}

<div class="page-container">
  <div class="main-content">
    <div class="container form-container">
      <div class="card">
        <div class="card-body">
          <b>This is now full height!</b>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：