Detect div size (height) while filling content (from database)

I want to detect the div size height while filling content (from database). If the div height exeed 800px, then draw new div as new content wrapper and fill the remain content inside. The illustration is like the following :

Single content wrapper produce开发者_高级运维d height (vary) let's say 2500 px for example (could be more)

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

i want to divide it with 800 px each so it will produced multiple div container (content wrapper) like the following.

<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>

From the example above while loading the content it meet 3 time 800 px height. So it will print 4 content wrapper on the page.

How to do the trick with jQuery and css ?

Thanks in advance.

You can get the height of your div with offsetHeight

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