javascript – 如何将html拆分为全屏高度页面?

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

我真正想要实现的是逐页阅读本书的效果.我假设需要一些javascript,所以我更喜欢用jQuery,但如果需要其他框架,它也没关系.

我不得不承认我对HTML和所有人都很陌生,所以如果我的猜测是愚蠢的,那就很抱歉,但目前我正在考虑以下方法:测量可见区域的实际高度(需要弄清楚如何),然后获取我的html文档并在标记后逐步获取标记,将其放入不可见的div并计算其生成的高度.当我的高度超过页面高度时,我已经完成了.但是,这种方法在长标签的情况下不起作用,例如:长段.

提前致谢.

编辑:谢谢你以前的答案.我试图用手动计算元素大小的方法,遇到一个我无法解决的问题.这是利润率崩溃的问题.我想要做的是遍历我的文档中的所有段落并总结.outerHeight(true)jQuery调用的结果.这应该给我完整的元素高度,包括填充,边距和边框.它实际上做了它所说的,但这里的问题是它不会考虑崩溃边际.因此我最终会得到错误的整体尺寸(大于实际尺寸),因为浏览器会抛弃一些边距(在我的情况下是相邻段落),但我会考虑它们.

任何想法如何解决这个问题,除了介绍算法决定哪些边距被折叠,哪些边缘没有?我认为这很难看……

最佳答案 您可以使用
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/

点赞