Question

鉴于此布局：

<div class="fill-page">
  <div class="row">
    <item class="item col"></item>
    <item class="item col"></item>
    <item class="item col"></item>
  </div>
  <div class="row">
    <div class="scroll">
      <table class="status">
      ...
      </table>
    </div>
  </div>
</div>

我已设置div.fill-page以使用

占用容器的高度

body {
    height: 100vh;
}

.fill-page {
  padding: 1em;
  border: 2px solid green;
  height: 100%;  
}

这包含2行。我正在尝试确保将div.scroll设置为使用

滚动其内容

div.scroll {
      overflow: scroll;
      height: 100%;
}

第二行溢出内容，而不是在body内以100vh包含它。

如何确保第二行占用尽可能多的剩余空间，并允许div.scroll在内部滚动内容？

I have a bootply to demonstrate.
该示例以100vh显示绿色边框，第二行显示div而不是滚动。

Answer 1

您可以在fill-page容器上使用flexbox（内置于Bootstrap 4中）。

https://www.bootply.com/vhhqJ4TW3R（已更新）

<div class="fill-page d-flex flex-column">
  <div class="row flex-shrink">
    <item class="item col"></item>
    <item class="item col"></item>
    <item class="item col"></item>
  </div>
  <div class="row flex-grow">
    <div class="scroll col-1">
        <table class="status">
            ..
        </table>
    </div>
  </div>
</div>

此外，使用另一个类来使底行增长（填充高度），如下所示：

.flex-grow {
    flex: 1 1 auto;
}

作为旁注，Bootstrap .row仅包含.col-，因此您应该为滚动列指定一个定义的.col-*宽度。否则，我没有理由在那里使用.row。

用body 100vh在bootstrap 4布局中滚动div

1 个答案: