在 CSS3 中模拟多页文档
我非常想创建一个网页，当缩放级别较小时，它具有与 Microsoft Word 或 Acrobat Reader 相同的外观，并且它会显示带有页面边框的并排页面。
我不知道该怎么做是定义一个固定大小的 paperborder 并将内容放入其中（这将是可变数量的 html 块元素），并使这些元素从一个页面“流动”到另一个页面，根据需要创建尽可能多的页面并使用适当的分页符。这是为了模拟打印输出，以便快速设计研究原型。
我的想法告诉我 javascript 是必要的，但由于我对 javascript 的了解接近于零，而且我几乎不想学习 CSS3 布局技巧，所以纯 CSS 是首选（尽管 JS 解决方案将是一个不错的选择）。
目前的单页文档如下：
<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Relatório Html</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
body {
background-color: #aaa;
}
.paperpage {
position: absolute;
width: 600px;
padding: 50px 30px 40px 30px;
margin-left: -320px;
left: 50%;
top:10px;
bottom:10px;
background-color: white;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
#innerpage {
position: relative;
margin: 0 auto;
height: auto !important;
min-height: 100%;
}
</style>
</head>
<body>
<div class="paperpage">
<div id="innerpage">
<p>Some Content</p>
</div>
</div>
</body>
</html>
I would like very much to create a web page which would have the same appearence of, say, Microsoft Word or Acrobat Reader when the zoom level is small and it shows side-by-side pages with page borders.
What I don't have idea what to do is to define a fixed size paperborder and throw the content inside it (which would be a variable number of html block elements), and make these elements "flow" from one page to the other, creating as much pages as needed with appropriate page breaks. This is intended to simulate printed output, for quick design-study prototyping.
Something in my mind tells javascript would be necessary, but since my knowledge of javascript is close to zero, and I want hardly to learn CSS3 layout tricks, pure CSS would be preferred (although the JS solution would be a nice alternative).
A current single page document is as follows:
<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Relatório Html</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
body {
background-color: #aaa;
}
.paperpage {
position: absolute;
width: 600px;
padding: 50px 30px 40px 30px;
margin-left: -320px;
left: 50%;
top:10px;
bottom:10px;
background-color: white;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
#innerpage {
position: relative;
margin: 0 auto;
height: auto !important;
min-height: 100%;
}
</style>
</head>
<body>
<div class="paperpage">
<div id="innerpage">
<p>Some Content</p>
</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这在 CSS3 甚至 Javascript 中都不容易做到。执行此操作的 Google Docs 有自己的计算页面引擎。也就是说，CSS3 区域模块发布了一个非常早期的草案，这将使这简单多了。
这里的一般理论是每次更新时测量文本的大小，并重新计算所需的页面，适当地填充内容。正如您可以想象的那样，这并不是世界上最容易做的事情。有很多不同的方法来测量内容和类似的事情，如果您真的很专注并深入研究，我建议您查看此处与测量 javascript 中的文本和元素大小相关的许多问题。
This is not easy to do in CSS3 or even in Javascript. Google Docs, which does this, has their own engine for calculating pages. That said, there is an extremely early draft posted of the CSS3 Regions Module which would make this a lot simpler.
The general theory here is to measure the size of the text each time it is updated, and recalculate the pages needed, filling content appropriately. As you can imagine, this isn't the easiest thing in the world to do. There are a lot of different ways for measuring content and things like this, and if you are really dedicated and dive in, I would recommend checking out many of the questions on here related to measuring text and element sizes in javascript.
我们找到的实现这种显示的最佳方法是实际以 PDF 格式显示并使用 PDFObject 显示它，或者更好的是直接在
例如：
我们使用 wkhtmltopdf 进行所有 HTML 到 PDF 的转换。它使用起来相对简单，我们已经在极其复杂的 HTML 文档中使用它并使用了各种 CSS 技术，并取得了巨大的成功。
根据我的经验，只要您不需要在该视图中实际编辑文档，与编写特定的 CSS 显示方法相比，以这种方式显示它会节省更多时间。
祝你好运！
Best way we've worked out to have this kind of display is to actually have the display in PDF format and display it using PDFObject, or better yet, directly in an
<object>element. Since the browser will directly use Adobe or a built in display method, it will be identical to what you're looking for, without all the effort of designing it.For Example:
We use wkhtmltopdf for all of our HTML to PDF conversion. It's relatively simple to use and we've been using it on hugely complicated HTML documents with all sorts of CSS techniques with great success.
In my experience it will save you much more time displaying it this way vs. coding up a specific CSS display method as long as you don't have any need for actually editing the document in that view.
Best of luck!