CSS固定位置页脚在打印时重叠。

Question

CSS固定位置页脚在打印时重叠。

3

也许有人可以解释一下这里发生了什么，因为我已经在这个问题上思考了一段时间，并且我的网络搜索也没有找到一个实用的答案。下面是一个带有自动生成页码的示例HTML页面：

function pageCount() {
  console.log(document.getElementsByClassName('page').length);
  return document.getElementsByClassName('page').length;
}
document.querySelectorAll(".total").forEach(function(el, i) {
  el.innerHTML = pageCount();
});

.page {
  width: 8in;
  height: 1in;
  padding: 0em;
  margin-top: .5in;
  margin-left: 0in;
  margin-right: 0in;
  margin-bottom: 0.25in;
}

body {
  color: black;
  counter-reset: pagen;
  font-family: "Courier New", Courier, monospace;
  font-size: 10pt;
}

.footer {
  counter-increment: pagen;
  margin: auto;
  width: 8in;
  display: table;
}

#footer-left:before {
  content: "Page " counter(pagen) " of ";
}

.ptable {
  page-break-before: always;
  page-break-inside: avoid;
}

@media print {
  .footer {
    position: fixed;
    bottom: 0;
  }
}

<html>
<head>
  <style></style>
</head>
<body>
  <div class="page">
    <div class="footer">
      <div id="footer-left"><span class="total"></span></div>
    </div>
  </div>
  <div class="page">
    <table class="ptable"></table>
    <div class="footer">
      <div id="footer-left"><span class="total"></span></div>
    </div>
  </div>
  <div class="page">
    <table class="ptable"></table>
    <div class="footer">
      <div id="footer-left"><span class="total"></span></div>
    </div>
  </div>
</body>
<script></script>
</html>

在屏幕上，我们看到我们单独的页脚字段显示页面编号。但是，当您打印它时，所有页脚最终都堆叠在一起，形成一个巨大的混乱。 position: fixed; bottom: 0; 导致页脚元素堆叠在一起，将 fixed 更改为 absolute 表示它们仅在第一页上堆叠，而更改为 relative 只会将页脚移动到内容底部。有关如何纠正此行为的任何建议？测试使用的浏览器是Chrome。

- Chaosbydesign

尝试过使用 position: absolute; 吗？ - Ajit Panigrahi

您想让页脚固定在底部而不重叠吗？ - Rishab Tyagi

@AjitZero 是的，在我的评论底部有。Absolute会导致相同的问题，只限于第1页（第2页和第3页没有使用absolute的页脚）。 - Chaosbydesign

@RishabhdevTyagi 是的，页脚需要跑到页面底部，无论页面上有多少内容，不应该让所有的页脚元素都堆在一起。 - Chaosbydesign

id为footer-left的元素必须是唯一的。 - Rishab Tyagi

我已经添加了一个答案。请检查它。 - Rishab Tyagi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rishab Tyagi · Accepted Answer

position:fixed; 是浏览器CSS中定义的。但是你可以覆盖它。这意味着控制台不是网站的一部分。JavaScript在其中运行。您需要为每个浏览器的控制台添加样式。

function pageCount() {
  console.log(document.getElementsByClassName('page').length);
  return document.getElementsByClassName('page').length;
}
document.querySelectorAll(".total").forEach(function(el, i) {
  el.innerHTML = pageCount();
});

.page {
  width: 8in;
  height: 1in;
  padding: 0em;
  margin-top: .5in;
  margin-left: 0in;
  margin-right: 0in;
  margin-bottom: 0.25in;
}

body {
  color: black;
  counter-reset: pagen;
  font-family: "Courier New", Courier, monospace;
  font-size: 10pt;
}

.footer {
  position:fixed;
  margin-top:340px;
  width: 8in;
   
}

#footer-left:before {
  content: "Page " counter(pagen) " of ";
}

.ptable {
  page-break-before: always;
  page-break-inside: avoid;
}

@media print {
  .footer {
    position:fixed;
    bottom: 0;
  }
}

<html>
<head>
  <style></style>
</head>
<body>
  <div class="page">
    <div class="footer">
      <div id="footer-left"><span class="total"></span></div>
    </div>
  </div>
  <div class="page">
    <table class="ptable"></table>
    <div class="footer">
      <div id="footer-left"><span class="total"></span></div>
    </div>
  </div>
  <div class="page">
    <table class="ptable"></table>
    <div class="footer">
      <div id="footer-left"><span class="total"></span></div>
    </div>
  </div>
</body>
<script></script>
</html>