css - Div 不会下推内容

Question

我有一个用 ajax 填充的 div。问题在于，当向其中添加元素时，div 超出了页面。内容最终被隐藏，我无法滚动查看内容。如何让 div 将页面向下推？

这是我用来填充 div 的代码：

function draw(){

    var fName,memType,price,gTotal=0;

    var tbl = '<table class="table table-striped table-condensed optOutTable" width="100%"><tbody>';

    for (var i=0, tot=cart.length; i < tot; i++) {

        fName = cart[i][2];
        memType = cart[i][3];
        price = cart[i][4];
        gTotal = gTotal+parseFloat(price,10);

        tbl+= '<tr><td><a href="#" class="btn btn-danger btn-mini" onclick="removeFromCart(\'\',this); return false;">x</a></td><td nowrap>'+fName+'</td><td width="100%">'+memType+'</td><td>$'+parseFloat(price,10).toFixed(2)+'</td></tr>';      

    }

        tbl+= '</tbody><tfoot><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>$'+gTotal.toFixed(2)+'</td></tr></tfoot></table>';

        $('#cart').html(tbl);

}

这是 html 的样子：

<div>
<div id="cart">Your cart is empty.</div>
</div>

Answer 1

尝试这个：

<div>
    <div id="cart" style="overflow:hidden; overflow-y:scroll; max-height:500px;">Your cart is empty.</div>
</div>

你可以改变max-height你想要的任何值！