如何使列末尾的内容具有 100% 高度可滚动？答案

【问题标题】：How to make content at end of column with 100% height scrollable?如何使列末尾的内容具有 100% 高度可滚动？
【发布时间】：2018-04-30 00:45:51
【问题描述】：

要求：

主行的高度必须为 100%。如果行溢出列，则列必须是可滚动的。行必须添加到列的末尾。

现在：

当行高为 100% 并且行溢出时，列滚动不起作用。但是如果它们没有溢出它，最后会添加行。但是，如果我删除滚动工作的 100% 高度，但最后不会添加行。

当高度 100% 时：

移除高度时：

我的代码。它在代码 sn-p 中不起作用...

html, body {
  height: 100%;
}

<div class="container h-100">
      <div class="row h-100 align-items-end" style="background-color: red;">
        <div class="col-12" style="overflow-y: auto;">
          <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
          <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
          <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
          <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
          <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
          <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
        </div>
      </div>
    </div>

【问题讨论】：

当然，如果您需要ROWS，使用表格可能是个好主意。

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

【解决方案1】：

您可以简单地在外部row 中使用最小高度vh。

.container>.row {
   min-height:100vh;
}

https://www.codeply.com/go/iFOOrsEKZa

编辑：要使每个 cmets 的底部对齐 div 可滚动，请使用 mt-auto 而不是 align-items-end，然后在家长row...

<div class="container">
  <div class="row" style="background-color: red;">
    <div class="col-12 mh-100 mt-auto" style="overflow-y: auto;">
      <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
      <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
      <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
      <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
      <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
      <div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
    </div>
  </div>
</div>

https://www.codeply.com/go/IPTKiFgNA8

【讨论】：

【解决方案2】：

是否有任何特殊原因将红色 div 作为蓝色 div 的父属性而不是兄弟属性？尝试将.container 的overflow-y 属性设置为像这样滚动：

.container {
  overflow-y: scroll;  
 }

【讨论】：