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

Posted 2023-03-05

【中文标题】可滚动的 div 占用剩余高度（Bootstrap 4 Flexbox 网格系统）

【英文标题】：Scrollable div take up remaining height (Bootstrap 4 Flexbox grid system)

【发布时间】：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;

【参考方案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;