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

Question

要求:

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

现在:

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

当高度为 100% 时:

移除高度时:

我的代码。它在代码片段中不起作用...

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>

Answer 1

您可以简单地在外层 row 中使用 min-height vh。

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

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

---

编辑:要使每个评论的底部对齐 div 可滚动，请使用 mt-auto 而不是 align-items-end，然后在父行上设置一个max-height...

<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