要求:
主行必须是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>
&#13;
答案 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
答案 1 :(得分:0)
你有没有特别的理由将红色div作为蓝色div的父属性而不是兄弟姐妹?尝试将overflow-y
的{{1}}属性设置为滚动,如下所示:
.container
&#13;