打印pdf时的div布局问题答案

【问题标题】：div layout issue while printing pdf打印pdf时的div布局问题
【发布时间】：2017-03-31 02:24:16
【问题描述】：

我正在编写一个冗长的 div 结构化布局。如果页面高度很短，我希望蓝色部分独立。

【问题讨论】：

建议您编辑您的问题 - 我认为您正在寻找粘性页脚，例如stackoverflow.com/questions/21805590/css-sticky-footer

【解决方案1】：

听起来您正在尝试制作粘性页脚。如果您知道蓝色部分的高度，您可以使用CSS-Tricks post 中描述的粘性页脚方法。

这是一个基于该方法的示例...

html, body {
  height: 100%;
}
.top {
  min-height: 100%;
  /* equal to bottom height */
  margin-bottom: -142px; 
}
.top:after {
  content: "";
  display: block;
}
.bottom, .top:after {
  /* .push must be the same height as bottom */
	height: 142px; 
}
.bottom {
  background: #ccc;
}

<div class="top">
  <h1>Top</h1>
</div>

<div class="bottom">
  <h1>Bottom</h1>
</footer>

【讨论】：

感谢您的回复，但我不想要一个粘性页脚，实际上我正在打印 pdf，但是当布局超出其页面高度时，其结构会中断。
结构如何破坏？您是否正在尝试找到一种在 html 中插入分页符的方法？
如果页面高度较短，我想分隔蓝色部分。实际上红色和蓝色部分在一个 div 中进行测试。我使用了这个 css .page-break{ display: block;宽度：100%；浮动：左}@media print {.page-break，.page-break div {显示：块；分页前：总是；宽度：100%；向左飘浮; } }
您可以在原始帖子中创建一个 sn-p 来复制您的代码吗？从您的帖子中不清楚您要完成什么或遇到什么问题。