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

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

这就很尴尬了

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

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

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

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

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

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

overflow: -webkit-paged-x;

但是这会有一个遗留问题

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

嘤嘤嘤

[经验] HTML页面中子盒子溢出了怎么办的更多相关文章

  1. 一个JSP结果页面tomcat内存溢出

    如今,试验组的同事寻找新能源我看到一个奇怪的现象.一个tomcat应用,内只有一个简单的jsp页面,和这个jsp无论是什么页java代码(我想用这个jsp在她的网页测试server一对tomcat的最 ...

  2. css 子盒子上下居中 文字溢出省略号

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS弹性盒子的基本用法

    .container { width: 302px; height: 302px; border: 1px solid; display: flex } .item { width: 100px; h ...

  4. css 文字溢出隐藏 带省略号

    .demo{ width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 注意宽度要设置

  5. CSS设计指南之理解盒子模型

    原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...

  6. html div+css做页面布局

    http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...

  7. javascript--鼠标拖拽窗口案例（鼠标按下，在鼠标移动过程中，盒子跟着一起移动，鼠标松开，盒子停止移动）

    界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...

  8. [19/05/20-星期一] CSS_css的盒子模型

    一.盒子模型 <!DOCTYPE html> <html> <!-- div 标签 块级标签 主要用来网页布局, 会将其中的子元素内容作为一个独立的整体存在 默认宽度是页 ...

  9. HTML网页设计基础笔记 • 【第7章 盒子模型】

    全部章节   >>>> 本章目录 7.1 盒子模型原理 7.1.1 盒子模型概述 7.1.2 盒子的大小 7.1.3 盒子之间的关系 7.2 标准文档流 7.2.1 标准文档流 ...

随机推荐

  1. java 协程

    协程是比线程更轻量级的程序处理单元,也可以说是运行在线程上的线程,由自己控制 1.适用于被阻塞的,且需要大量并发的场景. 2.不适用于,大量计算的多线程,遇到此种情况,更好实用线程去解决. 虽然Jav ...

  2. 9000端口号被上一个ip地址占用，需要reboot才可以恢复正常ip端口问题

    比如查看端口# lsof -i:9000 本机ip已经修改为192.168.0.50,而经过# lsof -i:9000查看到,端口是这样的,192.168.0.88:9000,显示的还是上一个ip的 ...

  3. 连接mysql，oracle的命令 以及导入sql文件

    Oracle 1,sqlplus  username/password 导入: 2,@后面跟着sql文件的路径,回车,导入数据 @D:/test.sql; 导入完毕,输入commit; MySQL: ...

  4. tkinter的listbox、radiobutton和checkbutton学习（2）

    1.tkinter的listbox 1.1 代码 #第1步,导出模块 import tkinter as tk #定义窗口,及其标题.大小和位置 win = tk.Tk() win.title('Li ...

  5. Nexus-vPC相关特性

    vPC Peer-switch: 不开启这功能,只有Primary设备发送BPDU,开启之后,将会把这一对设备呈现为一个STP Root,使用一个MAC地址,那么都可以发送BPDU了.STP BPDU ...

  6. query_phase_execution_exception

    ES报错信息: { "error": { "root_cause": [ { "type": "query_phase_execu ...

  7. 【转】uWSGI+django+nginx的工作原理流程与部署历程

    一.前言献给和我一样懵懂中不断汲取知识,进步的人们. 霓虹闪烁,但人们真正需要的,只是一个可以照亮前路的烛光 二.必要的前提 2.1 准备知识 1.django 一个基于python的开源web框架, ...

  8. pip源、搭建虚拟环境、git

    一.pip源 1.1 介绍 1.采用国内源,加速下载模块的速度2.常用pip源:-- 豆瓣:https://pypi.douban.com/simple-- 阿里:https://mirrors.al ...

  9. iOS APP语言国际化之应用内切换语言环境

    最近接了一个项目,需求是要做一款应用的英文版本,客户并不清楚,以为要另做一个APP.沟通后告诉他们在之前应用基础上加个国际化功能就好,把之前的语言国际化重新梳理记录一下. 一般设置更改本地语言环境后, ...

  10. centos7使用docker制作tomcat本地镜像

    1.安装Docker 安装docker前请确认当前linux的内核版必须是3.10及以上 命令: uname  -r 1).yum install -y yum-utils device-mapper ...