停止一個動態的Boostrap粘貼div在頁腳上增長

Question

我有一個Bootstrap粘貼div充當從長列表中選擇的項目的剪貼板。它以令人滿意的方式在頁面的左側上下浮動，但是當用戶從列表底部選擇足夠的項目時，div會在頁腳下增長。 什麼是正確的方式來監控粘貼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/