jquery - 填充内容时检测 div 大小(高度)(来自数据库)

Question

我想在填充内容(来自数据库)时检测 div 大小高度。如果 div 高度超过 800px，则绘制新的 div 作为新的内容包装器，并将剩余的内容填充在里面。插图如下:

单个内容包装器产生的高度(变化)比方说 2500 像素(可能更多)

<div id="content-wrapper>
p 1
p 2
p 3
p 4
p 5
p 6
p 8
p 9
</div>

我想将它分成 800 像素，这样它就会产生多个 div 容器(内容包装器)，如下所示。

<div id="content-wrapper>
p 1
part of p 2

[reached 800px here] --> break 1, print </div><div id="content-wrapper">

remaining part of p2...
p 3
p 4
p 5

[reached 800px here] --> break 2, print </div><div id="content-wrapper">

remaining part of p 5
p 6
p 7
p 8

[reached 800px here] --> break 3, print </div><div id="content-wrapper">
p 9

</div>

从上面的示例中，加载内容时它满足 3 倍 800 像素的高度。因此它将在页面上打印 4 个内容包装器。

如何使用 jQuery 和 css 来解决这个问题？

提前致谢。

Answer 1

您可以使用 offsetHeight 获取您的 div 的高度

var contentwrapper = $("#content-wrapper");
var height = contentwrapper.offsetHeight;