div 中动态添加的内容超过它的高度时造成 div 显示下沉的解决

有一个页面展示上的需求是：固定长宽的 <div> 中放置一个表格，点击按钮向表格中动态添加行，当表格显示大小超过 <div> 的设定时，<div> 出现滚动条(包括横向和纵向)，<div> 的大小和位置始终不变。

可是这样简单的代码随性写来却有个问题，当表格的高度未超过 <div> 高度时正常，而超过到一定程度时会造成 <div> 在页面中显示下沉。

示例代码如下(点击 Load Data 按钮加载数据)：

下面是点击 "Load Data" 按钮后的效果：

初始时

第一次点击，加载三条记录

第二次点击，加载六条记录

第三次点击，加载九条记录

从上图可以看到 <div> 在慢慢往下走，离按钮越来越远。实际上这时候你把由 JS 生成的源文件保存下来显示是正常的。

解决办法有四：

1、2. 给 <div> 加上 vertical-align:middle 或者 float:left 样式
3、4. 给 <table> 加上 vertical-align:middle 或者 float:left 样式

参考：1. http://topic.csdn.net/u/20090423/10/afb9b519-2148-4f88-bf99-fc2aee220546.html?647136483
即 CSDN 网友给的答案。