根据内容大小将 HTML 划分为页面答案

【问题标题】：Divide HTML into pages based on content size根据内容大小将 HTML 划分为页面
【发布时间】：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 等）还是只是一个视觉容器。打印单独的页面将由打印样式表处理。一般来说，试图将打印原则应用于网页是愚蠢的。它们是两种截然不同的媒介。

标签： html css webpage

【解决方案1】：

据我所知，您不能将页面分成不同的页面，但您可以使整个文档可滚动，我的意思是您在定义包含文档的 div 的高度和宽度后在您的 CSS 中添加 overflow:auto

#document_carrier{
    width:500px;
        height:350px;
    border:2px solid #ccc;
    overflow:auto;

}

您可以根据需要设置高度和宽度.... 实际上，我的上传按钮只是为了向您展示使页面可滚动，但您可以添加其他 javascript 函数或其他语言函数来上传文件。

js 小提琴demo

【讨论】：

谢谢，但这不是我的问题的解决方案。我想要多页，如果需要，我可以打印出来。