使用 html 和 css 的 PDF 类型视图。页面溢出问题答案

【问题标题】：PDF Type view using html and css. Page overflow problem使用 html 和 css 的 PDF 类型视图。页面溢出问题
【发布时间】：2018-12-07 06:28:57
【问题描述】：

我正在尝试使用 html 和 css 创建各种“文档查看器”。在没有边框的 iframe 中查看时，我希望最终结果看起来有点像 pdf。

我有一个带有一类纸的父 div 设置。这有一些盒子阴影和其他样式。

<div class="paper">

</div>

在这里面，我设置了带有一类页面的子 div。这是页面的所有内容所在。

<div class="page">

</div>

我的问题是当页面的内容太长并且您滚动到下一个“页面”时，它会混合在一起，看起来像垃圾。我附上了一支代码笔，以进一步帮助能够直观地看到我正在努力解决的问题。

代码笔

【问题讨论】：

【解决方案1】：

您可以使用以下方式更改您的 CSS 页面类：

.page {
  height: 100%;
  margin-bottom: 15px;
  padding: 20px;
  display: table;
  text-align: center;
}

【讨论】：

【解决方案2】：

有什么问题？

如果您的pages 中的内容太长，它会溢出下一页的高度末端类型的“出血”。

【讨论】：