如何在100％高度可滚动的列末尾制作内容？

Question

要求：

主行必须是100％高度。如果行溢出列比列必须可滚动。必须在列的末尾添加行。

立即

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

当身高100％：

移除身高后

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

＆＃13;

＆＃13;

html, body {
  height: 100%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以在外部vh中使用min-height row。

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

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

修改：要为每条评论设置底部对齐的div 可滚动 ，请使用mt-auto代替align-items-end，然后设置{{1在父max-height ...

上

row

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

Answer 2

你有没有特别的理由将红色div作为蓝色div的父属性而不是兄弟姐妹？尝试将overflow-y的{​​{1}}属性设置为滚动，如下所示：

＆＃13;

＆＃13;

.container

＆＃13;

＆＃13;

＆＃13;