[经验] HTML页面中子盒子溢出了怎么办

博客围绕查询数据记录页面,使用Bootstrap框架分页插件显示数据表格时出现的问题展开。当查询时间范围扩大,装数据表格的DIV盒子会溢出父元素盒子。经排查,否定了元素控制不精确和分页插件控制出错的猜想,最终发现是子元素增长而父元素未跟上,通过添加CSS样式属性解决。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

 

 

 

背景: 在查询数据记录的一个页面上使用bootstar 框架的分页插件作为显示数据表格的工具.

问题: 当查询的范围在一个较短的时间内时, 子元素是乖乖的呆在父元素内部的, 但是一但将查询的时间范围扩大, 装着数据表格的DIV 盒子就会溢出 父元素盒子

这就很尴尬了

 

思路一:  对元素的控制还不够精确

但是经过排查, 盒子的控制范围是正确的, 不存在错误, 而且该元素的父级盒子并不是动态拼接生成的, 所以这个猜想是错误的.

 

思路二: 分页插件控制出错

但是在修改时间范围后, 数据表格虽然超出了父盒子的范围, 但是对于操出每页规定的页数的数据还是会自动分页的, 对页面的切换是正常的, 所以这个猜想是错误的.

 

思路三: 忽然就想到一点, 会不会是子元素增长了, 而父元素没有跟上脚步呢?

这个问题就很好解决了, 在控制子元素的上一层DIV处添加一条css样式属性就行了     

overflow: -webkit-paged-x;


但是这会有一个遗留问题

 

这就很尴尬了,,,这个坑先放着,等哪天有想法了再来处理吧.反正这个报错对页面的正常显示是没有问题的

 


嘤嘤嘤

 

转载于:https://www.cnblogs.com/unityworld/p/10931219.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值