如何去除打印预览中页脚后留白并固定页脚，解决重复重叠问题

你之前的代码问题出在这两点：

• 把@page的margin设为0，导致页面内容能铺满整个A4，fixed定位的页脚会和正文内容挤在一起
• fixed页脚会在每一页都重复渲染，如果页面本身有footer元素，就会出现双重重叠

给你两个可行的解决办法：

办法一：调整边距+内容留白 #

通过给页面设置合理的边距，给页脚预留位置，同时让正文内容避开页脚区域：

@page {
  size: A4;
  /* 上下左右边距按需调整，底部边距要能放下你的页脚 */
  margin: 2cm 1cm 3cm;
}

@media print {
  body {
    /* 给正文加底部内边距，避免内容跑到页脚的固定区域里 */
    padding-bottom: 3cm;
  }

  footer {
    position: fixed;
    bottom: 0.5cm; /* 和@page的底部边距配合，让页脚在预留的边距里显示 */
    width: 100%;
    height: 2cm; /* 固定页脚高度，防止超出预留空间 */
    /* 可选：加个背景色区分，方便调试 */
    background: #fff;
  }
}

办法二：用CSS分页媒体属性（更适配打印场景） #

直接用打印专用的分页媒体定义页脚，避免重复渲染问题：

@page {
  size: A4;
  margin: 2cm 1cm 3cm;

  /* 直接在分页规则里定义页脚内容，会自动在每一页底部显示 */
  @bottom-center {
    content: "这里放你的页脚文本";
    font-size: 12px;
    color: #666;
  }
}

@media print {
  body {
    padding-bottom: 3cm;
  }
  /* 如果页面里原本有footer元素，把它隐藏掉，避免重复 */
  footer {
    display: none;
  }
}

内容的提问来源于stack exchange，提问作者Mudassar Saiyed