根据内容大小将 HTML 划分为页面
Posted
技术标签:
【中文标题】根据内容大小将 HTML 划分为页面【英文标题】：Divide HTML into pages based on content size 【发布时间】：2014-08-31 15:38:58 【问题描述】：我正在创建一个 webapp 来编辑文档。每个文档可以有多个页面。每页都有固定的尺寸（我使用的是德国的标准纸张尺寸，即 DIN A4，宽 210 毫米 x 高 297 毫米）。因此，我适当地设置了我的 html 的正文大小。
该文档已经看起来不错，并且是我希望的样子。只有一个主要问题是我希望网页自动将我的内容分成具有 DIN A4 大小的页面（例如div 框）（如上所述）。
我该怎么做？如果有一个只有 CSS 的解决方案会很好，但 javascript 也可以。我创建了一个 CodePen 来让你理解我的问题：example codepen
我想要像 Google Drive（文本文档）这样的行为，它会在文档的一页已满时创建一个新页面。截图如下：
HTML
<html>
<body>
<h1>This is the title of the document</h1><b>Table of contents</b>
<ol>
<li>Das Programm</li>
<li>Hintergründe</li>
<li>Vision</li>
</ol>
<p>some random text</p>
</body>
</html>
CSS
html
background-color: #333;
width: 100%;
height: 100%;
body
font: 15px arial;
width: 210mm;
height: 297mm;
background-color: #fff;
margin: 10px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 25mm 15mm 20mm 35mm;
h1
margin: 0 0 15px 0;
ol
margin: 0;
li
margin: 10px 0;
【问题讨论】：
对此的简单回答是：你不知道。 HTML/CSS 并不是为此而设计的。对此可能有一个解决方案，但我可以保证，你会非常沮丧，因为路上会有很多陷阱。您可能需要为此研究替代技术，例如 PDF。 你可以这样做。 Google Drive 也可以，但我不知道怎么做。 Google 云端硬盘到底是做什么的？您的意思是当它逐页显示文档时？这是通过转换 PDF（或类似的文档格式）在服务器端发生的事情。 当您在 Google Drive（他们的“word”软件）中编辑文本文档时，它会在文档的一页已满时创建一个页面。看看这个screenshot。我编辑了问题以显示屏幕截图。 是来自谷歌驱动器的新文字 html（不同的 url 等）还是只是一个视觉容器。打印单独的页面将由打印样式表处理。一般来说，试图将打印原则应用于网页是愚蠢的。它们是两种截然不同的媒介。 【参考方案1】：据我所知，您不能将页面分成不同的页面，但您可以使整个文档可滚动，我的意思是您在定义包含文档的 div 的高度和宽度后在您的 CSS 中添加 overflow:auto
#document_carrier
width:500px;
height:350px;
border:2px solid #ccc;
overflow:auto;
您可以根据需要设置高度和宽度.... 实际上，我的上传按钮只是为了向您展示使页面可滚动，但您可以添加其他 javascript 函数或其他语言函数来上传文件。
js 小提琴demo
【讨论】：
谢谢，但这不是我的问题的解决方案。我想要多页，如果需要，我可以打印出来。以上是关于根据内容大小将 HTML 划分为页面的主要内容，如果未能解决你的问题，请参考以下文章