使用html和CSS的PDF Type视图。页面溢出问题

Question

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

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

<div class="paper">

</div>

在这种情况下，我有带有一个页面类的子div设置。这是页面所有内容的所在。

<div class="page">

</div>

我的问题是，当内容对于页面而言太长而您又滚动到下一个“页面”时，所有内容混合在一起，看起来像垃圾。我已附上一支密码笔，以进一步帮助您直观地看到自己所遇到的困难。

CodePen

CodePen Link Here

Answer 1

出什么问题了？

如果您的page中的内容太长，则会在下一页上溢出“出血”的高度末端。

该怎么办？

1. 您应该为100vh设置paper的固定高度
2. 然后，告诉它不要扩展为：overflow: scroll
3. 使用min-height来设置page的高度，而不是height：它会自然地扩展页面的高度，而不是随着内容的增长而扩展
4. 最后，以防万一，将overflow: hidden设置为page

Answer 2

您可以通过以下方式在CSS中更改页面类：

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