Question

我正在创建一个用于编辑文档的webapp。每个文档可以有多个页面。每页都有固定的尺寸（我使用的是德国标准纸张尺寸，DIN A4，宽210毫米，高297毫米）。因此，我适当地设置了HTML的正文大小。

该文档看起来很漂亮，我希望它能成为现实。我希望网页只有一个主要问题是将我的内容自动分配到尺寸为DIN A4的页面（例如div框）中（如上所述）。

我该怎么做？如果有一个只有CSS的解决方案会很好，但JavaScript也可以。我为您创建了一个CodePen来理解我的问题：example codepen

我希望像Google云端硬盘（文档文档）这样的行为在文档的一页已满时创建新页面。这是一个截图：

Google Drive Example

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;
}

Answer 1

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

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

}

根据您的需要，您可以拥有自己的身高和宽度.... 实际上我上传按钮只是为了让你显示页面可滚动但你可以添加其他javascript函数或其他语言功能来上传文件。

js fiddle demo

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

1 个答案: