javascript - 阻止动态 Bootstrap 词缀 div 超出页脚

Question

我有一个 Bootstrap 词缀 div，用作从长列表中选择的项目的一种剪贴板。它以一种令人愉悦的方式在页面左侧上下 float ，但是当用户从列表底部选择足够的项目时，div 会在页脚下方增长。监视 Affix div 的大小并防止其长度超过其容器的正确方法是什么？

https://jsfiddle.net/bacase96/ 有一个 jfiddle来说明我的意思。增长剪贴板 div 的相关 Javascript 部分是

$( ".foo-to-clipboard.selectable" ).click(function() {
    var foo = $( this ).closest('tr').find('.foo-name');
    var foo_id = this.id.substr(4);
    if (selected_foos.indexOf(foo_id) != -1) {
        return;
    }

    $( this ).removeClass('selectable');
    $("#selected-foos").find("tbody").append(
        '<tr><td><i class="fa fa-times red" id="clipboard-' + foo_id +
        '"></i></td><td>' + foo.html() + "</td></tr>");

    selected_foos.push(foo_id);

});

Answer 1

将其添加到您的 CSS 中:

.clipboard {
    overflow:auto;
    max-height:240px  
}

https://jsfiddle.net/bacase96/5/