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

时间:2018-04-29 12:49:04

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

要求:

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

立即

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

当身高100%:

v1

移除身高后

enter image description here

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



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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

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

&#13;
&#13;
.container
&#13;
&#13;
&#13;