可滚动的 div 占用剩余高度（Bootstrap 4 Flexbox 网格系统）答案

【问题标题】：Scrollable div take up remaining height (Bootstrap 4 Flexbox grid system)可滚动的 div 占用剩余高度（Bootstrap 4 Flexbox 网格系统）
【发布时间】：2017-01-03 19:31:01
【问题描述】：

在 Bootstrap 4 Alpha 3 中启用 flexbox 支持之前，我的代码运行良好：

Working jsfiddle

但是，启用 flexbox 支持后，我无法使其工作。如果有办法使用Bootstrap 4 built-in Flexbox grid system features，那就最好了！

Not working jsfiddle

html

<div class="container wrapper">
  <div class="row header">
      header
  </div>

  <div class="row content">
      content: fill remaining space and scroll<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
  </div>

  <div class="row footer">
      footer
  </div>
</div>

css

.wrapper {
  height: 20rem;
  display: flex;      /* if remove this, the style will be correct, but won't scroll */
  flex-flow: column;  /* if remove this, the style will be correct, but won't scroll */
}

.header {
  background: tomato;
}

.content {
  background: gold;
  overflow-y: scroll;
}

.footer {
  background: lightgreen;
}

【问题讨论】：

标签： html css twitter-bootstrap flexbox bootstrap-4

【解决方案1】：

CSS 中的微小变化将帮助您在启用 flex 的 Bootstrap 4 中实现相同的效果：默认情况下，Bootstrap 4 将著名类 .row 的默认属性更改为：

.row {
    display: flex;
    margin-right: -0.9375rem;
    margin-left: -0.9375rem;
    flex-wrap: wrap;
}

即为什么你的结构和以前不一样，你需要做的就是把它的 CSS 改回原来的：

CSS

.wrapper {
  height: 20rem;
  display: flex;
  flex-flow: column;
}
.row {
    display: block;
    margin-right: -15px;
    margin-left: -15px;
}
.row:before, 
.row:after {
  content: " ";
  display: table;
}
.row:after {
  clear: both;
}

这是更新后的JSFiddle

【讨论】：

谢谢，但如果有办法不覆盖引导 css，那就太好了

【解决方案2】：

受@vivekkupadhyay 启发，换一种方式，只需将display: block; 添加到页眉和页脚即可。

jsfiddle

html

<div class="container wrapper">
  <div class="row header">
      header
  </div>

  <div class="row content">
      content: fill remaining space and scroll<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
  </div>

  <div class="row footer">
      footer
  </div>
</div>

css

.wrapper {
  height: 20rem;
  display: flex;
  flex-flow: column;
}

.header {
  background: tomato;
  display: block;
}

.content {
  background: gold;
  overflow-y: scroll;
}

.footer {
  background: lightgreen;
  display: block;
}

【讨论】：