HTML里的一块区域（比如div或P）要显示一些文字内容，怎么判断该区域是不是被填满了？

Posted 2023-04-15

从后台过来的大字段，几万字，我这边显示的时候要在一个弹出框分页显示，控制每页显示1300字，
在这个基础上分页显示，现在问题是如果内容全是中文就刚好填满，如果内容是英文就每页只填满一半，
怎么让浏览器自动调整显示的字数从而始终把该区域填满再分页？·

你的内容的div

.content 
    overflow: hidden;

然后点击下一页的时候，用javascript控制.content的scrollTop为.content的高度*页数就行了。

追问

这个方法能解决但是好像要用滚动条实现分页，我现在是在一个弹出框里显示内容，不想用滚动条，就是翻页后把当前td的内容清空然后把下一页的内容填充进来，请看图片

追答

scrollTop不需要滚动条呀。但是不能用td，只能用div。

追问

我现在还要计算总页数   请问用scrollTop能实现不？

追答

可以，把内容塞入之后，拿到div的offsetHeight。
然后拿offsetHeight/视窗高度，就是页数了。取Math.ceil向上取整。

参考技术A 高度不要写死，用min-height试下，高度随着填充内容高度而变化追问

弹出框的高度我不想改变因为现在的长宽是800*600看起来比较好看 有没有什么办法能在不改变容器大小的情况下 知道它是不是被填满了 应该有这种办法的吧 不然div的高度为什么会随着内容的填充自动增加，它应该是自动自己被填满了 我就是想知道怎么判断容器当前是不是被填满了

参考技术B 给个DIV定个宽高，溢出的内容下一页 参考技术C 用js控制字符函数追问

我现在就是这样做的，问题是同样是1300字，英文显示出来是中文体积的一半。导致页面下面空白

追答

你只能以中文为标准，然后设置div的高度为自动即可，高度自动是，你有多少内容就多高，不会像固定那样留白

追问

弹出框的高度我不想改变因为现在的长宽是800*600看起来比较好看 有没有什么办法能在不改变容器大小的情况下 知道它是不是被填满了

追答

判断为英文内容时改变行高

div是 HTML 中的 区域控制标签。

1：语法

2：作用

        div 标签可以用来划分 HTML 结构，从而配合 CSS 来整体控制某一块的样式。

        div 标签是块级元素，它可用做组合其它 HTML 元素的容器。

        div 标签可以用作严格的组织工具，如果用 id 或 class 来标记 div 标签，则 div 标签的作用会更加完美。

3：例子

        我们以 “坚持就是胜利” 这句话的中英文书写方式为例，看一下 div 是如何划分结构的

首先先看一下编辑器效果，如下
                再来看一下浏览器的运行效果，如下
        如果我们把 div 标签去掉，只用段落标签 p 来实现，其实浏览器的运行效果是一样的，那我们为什么还要用 div 标签呢 ，这不是多此一举吗？

        其实不然，这是在代码量比较少的情况下，两者的差距不明显，但如果代码有成百上千行的时候，就体现到了 div 标签划分结构的作用，同时也使代码更具有逻辑性。

总结来说，div 标签最重要的用途是划分区域，然后再结合 CSS ，针对指定区域进行样式控制。