使用 CSS 和/或 JS 打印时，如何在最后（！）页的底部放置 html 块？

Question

从 html 打印时，会生成两个页面。

对于视觉学习者：

CSS：

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: none; /* Initially hide the footer */
}

@media print {
  .footer {
    display: block; /* Show the footer when printing */
  }
}

HTML：

<div id="content">
  <h1>Your content here</h1>
  <p>A lot of "Lorem". Check sandbox (link place on bottom)</p>
</div>
<div class="bottom-on-last-page"><b>bottom-on-last-page</b></div>

沙盒

附注我在这里研究过类似的主题。社区对此问题没有答案。在 Html 中的最后一页底部打印标签

Answer 1

试试这个：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Footer Example</title>
<style>
  @media print {
    .footer {
      position: fixed;
      bottom: 0;
    }
    .page-break {
      page-break-after: always;
    }
  }
</style>
</head>
<body>

<!-- Your content goes here -->
<div class="page-break"></div>

<!-- Footer block -->
<div class="footer">
  This is the footer.
</div>

</body>
</html>

使用 CSS 和/或 JS 打印时，如何在最后（！）页的底部放置 html 块？

问题描述投票：0回答：1

1个回答

最新问题

使用 CSS 和/或 JS 打印时，如何在最后（！）页的底部放置 html 块？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1