根据长度在div之间拆分内容 [英] Splitting content between divs based on length

问题描述

我有以下布局样式，在书桌上显示为一张打印纸：

I have the following layout styled to appear as a sheet of printed paper on a writing desk:

<div class="paper">
    <div class="header">
        [stuff]
    </div>
    <div class="content">
        [long stuff]
    </div>
    <div class="footer">
        [stuff]
    </div>
</div>

我想能够在几个div之间分割divcontent以使得看起来内容在几张纸上逐字地分页，每张纸的高度为〜1000px。

I would like to be able to split the contents of the div "content" between several divs as so as to make it appear that the contents are literally paginated across several sheets of paper with each sheet of paper being ~1000px tall.

<div class="paper">
    <div class="header">
        [stuff]
    </div>
    <div class="content">
        [part 1 of long stuff]
    </div>
</div>
<div class="paper">
    <div class="content">
        [part 2 of long stuff]
    </div>
</div>
<div class="paper">
    <div class="content">
        [part 3 of long stuff]
    </div>
    <div class="footer">
        [stuff]
    </div>
</div>

这样做有多可行？

推荐答案

如果是这种情况，可行的选项可能是追踪div的高度，同时附加HTML数据。

If that is the case, the viable option maybe be keep track of the height of the div while data in HTML is being appended.

<div class="content" id="content_1">

对每个页面使用id，例如content_1，content_2。并使用jquery like：

Use an id for each page like content_1, content_2. And use jquery like :

$("#content_1").append("some text"); 
if($("#content_1").height() >= 1000) {
    $("#content_1").parent().append('<div class="content" id="content_2"></div>');
}

在

index = 0;
$("#content_" + index)

这篇关于根据长度在div之间拆分内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！