CSS 在打印时将自定义页脚粘贴在每个页面底部

在本文中，我们将介绍如何使用CSS在打印时将自定义页脚粘贴在每个页面底部的方法。当我们打印网页时，通常希望在每个页面底部都显示相同的页脚，这可以帮助我们保持整体的信息和风格的一致性。通过使用CSS，我们可以很容易地实现这个效果。

阅读更多：CSS 教程

使用position属性实现固定页脚

要在每个页面底部固定自定义页脚，我们可以使用CSS的position属性。这个属性允许我们对元素进行定位，我们可以指定元素在文档流中的位置。

首先，我们需要创建一个页脚的容器，并为它设置一个固定的高度。然后，我们可以使用CSS的position属性将页脚容器固定到页面底部。

<style>
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f5f5f5;
  padding: 10px;
}
</style>

<div class="footer">
  这里是页脚的内容
</div>

在上面的示例中，我们创建了一个class为”footer”的页脚容器，并将它的position属性设置为”fixed”，这意味着它将始终保持在页面的底部位置。通过将bottom属性设置为0，我们确保页脚容器粘贴在页面的底部。

隐藏页脚在打印时的显示

默认情况下，CSS样式将应用于打印输出。但是，有时我们可能希望在打印时隐藏页脚，以便我们可以使用自定义打印样式或不在打印输出中显示页脚。我们可以使用CSS的@media规则来实现这一点。

以下是一个示例代码，它将在打印时隐藏页脚：

<style>
@media print {
  .footer {
    display: none;
  }
}
</style>

在上面的代码中，我们使用了@media print规则，它会在打印时应用定义的样式。通过将页脚的display属性设置为none，我们将隐藏页脚在打印输出中的显示。

自定义打印页脚样式

除了将自定义页脚粘贴在每个页面底部之外，我们还可以进一步自定义打印页脚的样式，以满足不同的需求和设计要求。

我们可以使用CSS来控制打印页脚的样式，包括字体、颜色、背景和间距等属性。

以下是一个示例代码，它展示了如何自定义打印页脚的样式：

<style>
@media print {
  .footer {
    font-size: 12px;
    color: #777;
    background-color: #f5f5f5;
    padding: 10px;
    text-align: center;
  }
}
</style>

在上面的代码中，我们使用@media print规则来定义打印样式。我们可以通过设置font-size属性来改变字体大小，通过设置color属性改变字体颜色，通过设置background-color属性来改变背景颜色，以及通过设置padding属性来改变页脚内容的间距。