css 打印多页时避免文本重叠页脚

j5fpnvbx 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(203)

我有一页要打印，其中包含文本和页脚
如果文本跨越多个页面，则在打印时会与页脚重叠
我该如何避免这种情况？
社会科学委员会

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 120px;
  bottom: 0;
}

超文本标记语言

<div class="container content">
    <div class="row">
        <div class="col-2">Name</div>
        <div class="col-10">{{ name }}</div>
    </div>
    <div class="row">
        <div class="col-2">Age</div>
        <div class="col-10">{{ age }}</div>
    </div>
    <div class="row">
        <div class="col-2">Notes</div>
        <div class="col-10">{{ notes }}</div>
    </div>
 </div>

<div class="container">
    <footer class="align-items-center">
        <div class="row" style="width: 100%;">
            <div class="col-6 text-center"></div>
            <div class="col-6 text-center">Name<br>Name2</div>
        </div>
        <hr style="width: 100%;">
        <div class="row" style="width: 100%;">
            <div class="col-12 text-center">
                       Address
            </div>
        </div>
    </footer>
</div>

我尝试将页脚设置为body的背景图像，并将margin添加到@page，但这些边距也会影响背景图像

css

来源：https://stackoverflow.com/questions/76137263/avoid-text-overlapping-footer-when-printing-multiple-pages

1条答案

按热度按时间

jljoyd4f1#

可以使用CSS属性break-inside（替换page-break-inside）MDN Web DOCS和break-after（替换page-break-after）MDN Web Docs
这样你就可以在每一页的页脚前添加一个分页符。所以页脚不会被你的内容覆盖。

footer {
  break-after: always;
  background-color: white;
}

然后为了避免拆分内容/元素：

.row {
  page-break-inside: avoid;
}

您可能需要仔细检查您的用户/访问者使用的浏览器：
Can I use CSS break-after
Can I use CSS break-inside

更新：

或者你可以尝试使用@media print。我以前在project上用过。@媒体打印

@media print {
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 120px;
  }
  .container.content {
    padding-bottom: 140px; /* adjust this value to match the height of your footer plus some extra padding */
  }
}

赞(0）回复(0）举报 2023-05-02

我来回答

css 打印多页时避免文本重叠页脚

1条答案

相关问题

热门标签

最新问答