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

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

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

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

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

初始时div_table_1.jpg 第一次点击,加载三条记录div_table_2.jpg 第二次点击,加载六条记录div_table_3.jpg 第三次点击,加载九条记录div_table_4.jpg

从上图可以看到 <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 网友给的答案。

类别: Web/JS. 标签: , . 阅读(502). 订阅评论. TrackBack.

Leave a Reply

Be the First to Comment!

avatar