如何将html拆分为全屏高度页面？答案

【问题标题】：How to split html to full-screen height pages?如何将html拆分为全屏高度页面？
【发布时间】：2011-12-27 05:57:53
【问题描述】：

我需要将一些 html 内容拆分为页面，以便每个页面都有屏幕的高度和一些预定义的宽度。页面拆分可能发生在段落中间（或者可能是其他一些 html 元素），因此应该以某种方式处理这种情况。

我真正想要实现的是逐页阅读的效果。我认为需要一些 javascript，所以我更喜欢使用 jQuery，但如果需要其他框架，也可以。

我不得不承认我对 HTML 还是很陌生，如果我的猜测很愚蠢，很抱歉，但目前我正在考虑以下方法：测量可见区域的实际高度（需要弄清楚如何)，然后获取我的 html 文档并逐步获取标签后的标签，将其放入不可见的 div 并计算其结果高度。当我的高度超过页面高度时，我就完成了。但是，这种方法不适用于长标签，例如长段。

提前致谢。

编辑：感谢您之前的回答。我尝试使用手动计算元素大小的方法，遇到了一个我无法很好解决的问题。这是崩溃边距的问题。我要做的是遍历文档中的所有段落并总结 .outerHeight(true) jQuery 调用的结果。这应该给我元素的完整高度，包括填充、边距和边框。它实际上做了它所说的，但这里的问题是它没有考虑到崩溃的边距。因此，我最终得到了错误的整体尺寸（比实际尺寸大），因为浏览器会丢弃一些边距（在我的情况下是相邻段落的边距），但我会考虑到它们。

除了引入决定哪些边距折叠哪些不折叠的算法之外，还有其他解决方法的方法吗？我觉得很丑……

【问题讨论】：

标签： javascript html pagination margins

【解决方案1】：

您可以使用 CSS3 多列规则，例如：http://www.quirksmode.org/css/multicolumn.html 或者为了支持所有浏览器，请使用 javascript 插件：http://welcome.totheinter.net/columnizer-jquery-plugin/

这个插件甚至还有一个多页多列的例子：http://welcome.totheinter.net/2009/06/18/dynamic-multi-page-multi-column-newsletter-layout-with-columnizer/

【讨论】：

【解决方案2】：

我能想到一个框架似乎可以满足您的需求（还有更多）：https://github.com/Treesaver/treesaver

【讨论】：

【解决方案3】：

jQuery 将通过 height() 函数为您提供元素的高度（以像素为单位）。

jQuery("BODY").height() 将为您提供视口的最大高度（尽管仅当您的内容高度 >= BODY 的高度 - 否则它将为您提供主体在查看端口。）

计算 P 标签（或其他标签）的高度似乎是一个不错的方法。我想如果您想为大段落分解 P 标签的内容，您可以为页面上的最后一个 P 标签定义最大“破损”高度。然后，您可以通过使用jQuery("#the-next-page-id).append(jQuery("<P>"+restOfTheParagraphContent+"</P>")) 创建一个新的 P 标签来破坏 P 标签的其余内容

【讨论】：

看起来像这样的 CSS 多列布局 [link]w3.org/TR/css3-multicol 会很有帮助，除非在这种情况下，您需要多行布局，每行都算作一页。我想我记得一个 jQuery 插件做了类似的事情。
对此有任何消息吗？我好奇。 css-multicol 有用吗？ jQuery 是一种选择吗？

【解决方案4】：

使用自己的逻辑计算html正文中每个元素的高度使用 jQuery 代码

$('selector').height();

使用这个，你可以计算一些html元素的高度并决定多少元素应显示在您的设备屏幕上。

了解更多，请访问jQuery Height Documentation

【讨论】：

【解决方案5】：

如果有人还在寻找类似的东西，我最近使用 JQuery 完成了它。它还将第一页留空（用于标题等）：

https://jsfiddle.net/xs31xzvt/

如果前一个 div 已满，它基本上会遍历可移动项目并将它们插入到新的 div 中。

 (function($) {

    $(document).ready(formatPages)
    function formatPages() {
        var container = $('.container');
        var subPage = $('.subpage').get(0);
        var subPageHeight = subPage.offsetHeight;
        var subPageScrollHeight = subPage.scrollHeight;
        // See how many pages we'll need
        var pages = Math.floor(subPageScrollHeight / subPageHeight) + 1;
        //add a new page
        var pageCount = 2;
        var pageDiv = createPageDiv(pageCount);
        var subPageDiv = createSubPageDiv(pageCount);

        var addPage = function (){
            pageCount++;
            pageDiv = createPageDiv(pageCount);
            subPageDiv = createSubPageDiv(pageCount);
            pageDiv.append(subPageDiv);
            container.append(pageDiv);
            pageContentHeight = 0;
        }
        addPage()
        container.append(pageDiv);
        $('.movable').each(function() {
            var element = $(this);
            //remove the element
            element.detach();
            //try to add the element to the current page
            if (pageContentHeight + element.get(0).offsetHeight > subPageHeight) {
                subPageDiv.append(getFooterDiv().show());
                //add a new page
                addPage();
            }
            subPageDiv.append(element);
            pageContentHeight += element.get(0).offsetHeight;
        });
    }



    function createPageDiv(pageNum) {
        return $('<div/>', {
            class: 'page',
            id: 'page' + pageNum
        });
    }
    function createSubPageDiv(pageNum) {
        return $('<div/>', {
            class: 'subpage',
            id: 'subpage' + pageNum
        });
    }
    function getFooterDiv() {
        return $('.footer').first().clone();
    }
}(jQuery));

【讨论】：